/*
Theme Name: Next Labs
Template: twentytwentyfive
Description: Tema hijo de Next Labs. Verde menta claro con paneles de cristal esmerilado y portada a pantalla completa.
Version: 2.0.0
Text Domain: nextlabs
*/

:root {
	--nl-fondo: #0d1f1b;
	--nl-texto: #e8f1ed;
	--nl-suave: #a3b8b0;
	--nl-esmeralda: #34d399;
	--nl-turquesa: #2dd4bf;
	--nl-noche: #07130f;
	--nl-cristal: rgba(255, 255, 255, .035);
	--nl-cristal-2: rgba(255, 255, 255, .055);
	--nl-borde: rgba(255, 255, 255, .09);
	--nl-sombra: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px -30px rgba(0, 0, 0, .6);
	--nl-grad: linear-gradient(120deg, #34d399 0%, #2dd4bf 100%);
	--nl-radio: 28px;
	--nl-lado: clamp(1rem, 4vw, 2rem);
	--nl-ancho: 1200px;
	/* margen lateral que alinea el contenido de la portada con los paneles de abajo */
	--nl-carril: max(var(--nl-lado), calc((100vw - var(--nl-ancho)) / 2 + clamp(1.3rem, 5vw, 4rem)));
}

/* ---------- FONDO: verde oscuro con luces esmeralda ---------- */
body {
	background-color: var(--nl-fondo);
	background-image:
		radial-gradient(60rem 42rem at -10% 20%, rgba(52, 211, 153, .10), transparent 62%),
		radial-gradient(52rem 38rem at 110% 60%, rgba(45, 212, 191, .08), transparent 60%),
		linear-gradient(180deg, #0f2621 0%, #0c1d19 50%, #0b1a17 100%);
	background-attachment: fixed;
	color: var(--nl-texto);
	-webkit-font-smoothing: antialiased;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}
::selection { background: rgba(52, 211, 153, .3); }
a { color: var(--nl-esmeralda); }

/* ---------- CABECERA: flota encima de la portada ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: .8rem var(--nl-lado) 0;
	margin: 0;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.nl-header {
	max-width: 1280px;
	margin: 0 auto !important;
	padding: .55rem .6rem .55rem 1.1rem !important;
	background: rgba(10, 26, 22, .55);
	border: 1px solid var(--nl-borde);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7);
	gap: 1rem;
}
.nl-marca { gap: .6rem !important; }
.nl-marca .wp-block-site-logo img { width: 30px; height: auto; filter: brightness(0) invert(1); }
.nl-marca .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .32em;
	text-transform: uppercase;
}
.nl-marca .wp-block-site-title a { color: #fff; text-decoration: none; }

.nl-header .wp-block-navigation { gap: .2rem; font-size: .93rem; font-weight: 500; }
.nl-header .wp-block-navigation-item__content {
	color: var(--nl-texto);
	padding: .45rem .8rem !important;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.nl-header .wp-block-navigation-item__content:hover,
.nl-header .current-menu-item > .wp-block-navigation-item__content { background: rgba(52, 211, 153, .12); color: var(--nl-esmeralda); }
.nl-header .wp-block-navigation__submenu-icon { color: var(--nl-texto); }
.nl-header .wp-block-navigation__submenu-container {
	background: rgba(12, 30, 26, .97) !important;
	border: 1px solid var(--nl-borde) !important;
	border-radius: 18px;
	padding: .4rem !important;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
	min-width: 230px !important;
}
.nl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 12px; }
.nl-header .wp-block-buttons .wp-block-button__link { padding: .6rem 1.2rem !important; font-size: .9rem; }
.wp-block-navigation__responsive-container-open { color: #fff; }
@media (max-width: 1000px) { .nl-header > .wp-block-buttons { display: none; } }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--nl-fondo) !important;
	color: var(--nl-texto) !important;
	padding: 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.2rem; color: var(--nl-texto); }

/* ---------- CONTENIDO ---------- */
main.wp-block-group { margin-top: 0 !important; padding-bottom: clamp(3rem, 7vw, 6rem); }
.wp-block-post-content { padding-left: var(--nl-lado); padding-right: var(--nl-lado); }
.wp-block-post-content > section.wp-block-group {
	max-width: var(--nl-ancho);
	margin: clamp(1.1rem, 2.4vw, 1.8rem) auto 0 !important;
	padding: clamp(2.2rem, 5vw, 4rem) clamp(1.3rem, 5vw, 4rem) !important;
	background: var(--nl-cristal);
	border: 1px solid var(--nl-borde);
	border-radius: var(--nl-radio);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--nl-sombra);
	position: relative;
}
.wp-block-post-content > section.wp-block-group > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
.wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3 { color: #fff; }
.wp-block-post-content h2 {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	letter-spacing: -.025em;
	margin: 0 0 1rem;
	max-width: 22ch !important;
}
.wp-block-post-content h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: 0 0 .5rem; }
.wp-block-post-content section > p:not(.has-small-font-size) { max-width: 64ch !important; color: var(--nl-suave); }

/* etiqueta pequeña encima de cada titular */
.wp-block-post-content p.has-small-font-size:has(> strong) {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: fit-content;
	margin: 0 0 1.1rem !important;
	padding: .38rem .85rem;
	border-radius: 999px;
	background: rgba(52, 211, 153, .08);
	border: 1px solid rgba(52, 211, 153, .22);
	font-size: .72rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nl-esmeralda);
}
.wp-block-post-content p.has-small-font-size:has(> strong)::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--nl-esmeralda);
	box-shadow: 0 0 10px 2px rgba(52, 211, 153, .5);
}

/* ---------- PORTADA: a pantalla completa, sin recuadro ---------- */
.wp-block-post-content > section.wp-block-group:first-child {
	max-width: none;
	width: auto;
	min-height: min(92vh, 900px);
	margin: 0 calc(-1 * var(--nl-lado)) !important;
	padding: clamp(8rem, 16vh, 11rem) var(--nl-carril) clamp(4rem, 10vh, 7rem) !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(42rem 26rem at 78% 38%, rgba(52, 211, 153, .18), transparent 70%),
		radial-gradient(30rem 20rem at 55% 62%, rgba(45, 212, 191, .08), transparent 70%),
		linear-gradient(180deg, #102a24 0%, #0d221d 70%, rgba(13, 31, 27, 0) 100%);
}
/* el matraz del logo, grande y suave, a la derecha */
.wp-block-post-content > section.wp-block-group:first-child::after {
	content: "";
	position: absolute;
	right: max(-3rem, calc((100vw - var(--nl-ancho)) / 2 - 2rem));
	top: 54%;
	width: clamp(240px, 32vw, 460px);
	aspect-ratio: 300 / 327;
	transform: translateY(-50%) rotate(-8deg);
	background: url("assets/mark.png") center / contain no-repeat;
	opacity: .07;
	pointer-events: none;
}
.wp-block-post-content > section.wp-block-group:first-child h1 {
	font-size: clamp(2.6rem, 6.6vw, 5.4rem);
	letter-spacing: -.035em;
	line-height: 1.02;
	max-width: 15ch;
	margin: 0 0 1.4rem;
	background: linear-gradient(100deg, #fff 0%, #fff 55%, #86efc0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-block-post-content > section.wp-block-group:first-child > p:not(.has-small-font-size) {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	max-width: 52ch !important;
}
.wp-block-post-content > section.wp-block-group:first-child .wp-block-buttons { margin-top: 2rem; }
@media (max-width: 700px) {
	.wp-block-post-content > section.wp-block-group:first-child { min-height: 0; }
	.wp-block-post-content > section.wp-block-group:first-child::after { opacity: .05; right: -5rem; }
}

/* ---------- TARJETAS (columnas) ---------- */
.wp-block-post-content .wp-block-columns { gap: clamp(.8rem, 2vw, 1.2rem); margin: 1.6rem 0 0; }
.wp-block-post-content .wp-block-columns + .wp-block-columns { margin-top: clamp(.8rem, 2vw, 1.2rem); }
.wp-block-post-content .wp-block-column {
	background: var(--nl-cristal-2);
	border: 1px solid var(--nl-borde);
	border-radius: 20px;
	padding: 1.5rem 1.5rem 1.3rem;
	transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.wp-block-post-content .wp-block-column:hover { transform: translateY(-4px); border-color: rgba(52, 211, 153, .3); background: rgba(255, 255, 255, .07); }
.wp-block-post-content .wp-block-column p { color: var(--nl-suave); margin: 0; font-size: .98rem; }
.wp-block-post-content .wp-block-column p + p { margin-top: .5rem; }
.wp-block-post-content .wp-block-column a { font-weight: 600; text-decoration: none; color: var(--nl-esmeralda); }
.wp-block-post-content .wp-block-column a:hover { text-decoration: underline; }
.wp-block-post-content .wp-block-column h3::first-letter { color: var(--nl-esmeralda); }

/* tarjetas de proyecto con imagen */
.wp-block-post-content .wp-block-column:has(> .wp-block-image) { padding: .6rem .6rem 1.2rem; }
.wp-block-post-content .wp-block-column > .wp-block-image { margin: 0 0 1rem; }
.wp-block-post-content .wp-block-column > .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border-radius: 14px;
	display: block;
}
.wp-block-post-content .wp-block-column:has(> .wp-block-image) > :not(.wp-block-image) { padding-left: .7rem; padding-right: .7rem; }
.wp-block-post-content .wp-block-column:has(> .wp-block-image) > p:first-of-type:not(:last-child) {
	font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-esmeralda);
}

/* ---------- LISTAS con check ---------- */
.wp-block-post-content ul.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 1.6rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: .7rem;
}
.wp-block-post-content ul.wp-block-list li {
	position: relative;
	padding: .85rem 1rem .85rem 3rem;
	background: var(--nl-cristal-2);
	border: 1px solid var(--nl-borde);
	border-radius: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--nl-texto);
}
.wp-block-post-content ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: .95rem;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307130f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat,
		var(--nl-grad);
}

/* ---------- PREGUNTAS FRECUENTES ---------- */
.wp-block-post-content .wp-block-details {
	background: var(--nl-cristal-2);
	border: 1px solid var(--nl-borde);
	border-radius: 16px;
	padding: 0;
	margin: .7rem 0 0 !important;
	max-width: 860px;
	overflow: hidden;
}
.wp-block-post-content .wp-block-details summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 3.4rem 1.1rem 1.3rem;
	font-weight: 600;
	position: relative;
	color: #fff;
}
.wp-block-post-content .wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-post-content .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.8rem; height: 1.8rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(52, 211, 153, .12);
	color: var(--nl-esmeralda);
	font-size: 1.2rem;
	transition: transform .25s;
}
.wp-block-post-content .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-post-content .wp-block-details p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--nl-suave); }

/* ---------- BOTONES ---------- */
.wp-block-button__link, .wpcf7-submit {
	background: var(--nl-grad) !important;
	color: var(--nl-noche) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: .95rem 1.7rem !important;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600 !important;
	font-size: .98rem;
	text-decoration: none !important;
	box-shadow: 0 10px 30px -12px rgba(52, 211, 153, .6);
	transition: transform .2s, box-shadow .2s;
	cursor: pointer;
}
.wp-block-button__link:hover, .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(52, 211, 153, .75); }
.wp-block-post-content .wp-block-button + .wp-block-button .wp-block-button__link {
	background: rgba(255, 255, 255, .04) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	box-shadow: none;
}
.wp-block-buttons { gap: .7rem; }

/* ---------- FORMULARIO ---------- */
.wpcf7 { max-width: 760px; margin-top: 1.6rem; }
.wpcf7 form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	background: var(--nl-cristal-2);
	border: 1px solid var(--nl-borde);
	border-radius: 22px;
	padding: clamp(1.2rem, 3vw, 2rem);
}
.wpcf7 form > p { margin: 0; }
.wpcf7 form > p:nth-of-type(n+7) { grid-column: 1 / -1; }
.wpcf7 label { display: block; font-size: .85rem; font-weight: 600; color: var(--nl-suave); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"],
.wpcf7 select, .wpcf7 textarea {
	width: 100%;
	margin-top: .4rem;
	padding: .8rem .95rem;
	font: inherit;
	font-weight: 400;
	color: var(--nl-texto);
	background: rgba(0, 0, 0, .22);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
	color-scheme: dark;
}
.wpcf7 ::placeholder { color: rgba(163, 184, 176, .6); }
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--nl-esmeralda);
	box-shadow: 0 0 0 4px rgba(52, 211, 153, .15);
}
.wpcf7 .wpcf7-acceptance { font-size: .9rem; color: var(--nl-suave); }
.wpcf7 small { color: var(--nl-suave); }
.wpcf7 .wpcf7-response-output { grid-column: 1 / -1; margin: 0 !important; border-radius: 12px; }
@media (max-width: 640px) { .wpcf7 form { grid-template-columns: 1fr; } }

/* ---------- ÚLTIMAS ENTRADAS ---------- */
.wp-block-latest-posts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 1.4rem; }
.wp-block-latest-posts li { background: var(--nl-cristal-2); border: 1px solid var(--nl-borde); border-radius: 18px; padding: 1.2rem 1.3rem; }
.wp-block-latest-posts a { color: #fff; font-weight: 600; text-decoration: none; }
.wp-block-latest-posts__post-date { color: var(--nl-suave); font-size: .85rem; }

/* ---------- PÁGINAS CON TÍTULO (legales, blog, entradas) ---------- */
body:not(.page-template-page-no-title) main { padding-top: 7rem; }
main .wp-block-post-title { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; color: #fff; }
body:not(.page-template-page-no-title) main > .wp-block-group {
	max-width: var(--nl-ancho);
	margin: 0 auto !important;
	width: calc(100% - 2 * var(--nl-lado));
	background: var(--nl-cristal);
	border: 1px solid var(--nl-borde);
	border-radius: var(--nl-radio);
	color: var(--nl-texto);
}

/* ---------- PIE ---------- */
.wp-site-blocks > footer.wp-block-template-part { margin-top: 0; }
.nl-pie {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	background:
		radial-gradient(40rem 22rem at 10% 0%, rgba(52, 211, 153, .12), transparent 65%),
		var(--nl-noche);
	border-top: 1px solid var(--nl-borde);
	color: var(--nl-suave);
	padding-left: var(--nl-lado) !important;
	padding-right: var(--nl-lado) !important;
}
.nl-pie h4 {
	color: #fff;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	margin: 0 0 1rem;
}
.nl-pie p { margin: 0 0 .55rem; font-size: .95rem; }
.nl-pie a { color: var(--nl-suave); text-decoration: none; transition: color .2s; }
.nl-pie a:hover { color: var(--nl-esmeralda); }
.nl-pie .wp-block-image img { width: 150px; height: auto; margin-bottom: 1rem; }
.nl-pie .nl-legal { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 2.5rem; padding-top: 1.4rem; font-size: .85rem; color: #6d837b; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* ---------- PORTADA 3D CON SCROLL (solo inicio; la activa assets/js/hero-3d.js) ---------- */
.wp-block-post-content > section.wp-block-group.nl-hero {
	height: 260vh;
	min-height: 0;
	padding: 0 !important;
	display: block;
	overflow: visible;
	background: none;
}
.wp-block-post-content > section.wp-block-group.nl-hero::after { display: none; }
.nl-hero__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(6rem, 12vh, 8rem) var(--nl-carril) clamp(4rem, 10vh, 6rem);
	box-sizing: border-box;
}
/* velo a la izquierda para que el texto siempre se lea sobre el 3D */
.nl-hero__pin::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(13, 31, 27, .72) 0%, rgba(13, 31, 27, .35) 38%, rgba(13, 31, 27, 0) 58%);
	pointer-events: none;
}
.nl-hero__lienzo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 1.2s ease;
	/* se desvanece por abajo para fundirse con el resto de la página */
	-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.nl-hero--listo .nl-hero__lienzo { opacity: 1; }
.nl-hero__contenido {
	position: relative;
	z-index: 2;
	max-width: min(620px, 56%);
	will-change: opacity, transform;
}
.nl-hero__contenido > p:not(.has-small-font-size) {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	max-width: 52ch;
	color: var(--nl-suave);
	margin: 0;
}
.nl-hero__contenido .wp-block-buttons { margin-top: 2rem; }

.nl-hero__pista {
	position: absolute;
	left: 50%;
	bottom: clamp(1.4rem, 4vh, 2.4rem);
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	font-size: .7rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nl-suave);
}
.nl-hero__pista span {
	width: 22px;
	height: 34px;
	border: 1.5px solid rgba(232, 241, 237, .35);
	border-radius: 12px;
	position: relative;
}
.nl-hero__pista span::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--nl-esmeralda);
	animation: nl-rueda 1.8s ease-in-out infinite;
}
@keyframes nl-rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

.nl-hero__cierre {
	position: absolute;
	left: var(--nl-carril);
	top: 50%;
	z-index: 2;
	margin: -3.5em 0 0;
	opacity: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: #fff;
	pointer-events: none;
	will-change: opacity, transform;
}
.nl-hero__cierre span {
	background: var(--nl-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* sin animaciones: portada normal con el cubo ya montado */
.wp-block-post-content > section.wp-block-group.nl-hero--quieto { height: auto; }
.nl-hero--quieto .nl-hero__pin { position: relative; min-height: min(92vh, 900px); height: auto; }
.nl-hero--quieto .nl-hero__pista, .nl-hero--quieto .nl-hero__cierre { display: none; }

@media (max-width: 900px) {
	.wp-block-post-content > section.wp-block-group.nl-hero { height: 220vh; }
	.nl-hero__pin { justify-content: flex-start; padding-top: clamp(6.5rem, 16vh, 8rem); }
	.nl-hero__contenido { max-width: none; }
	.nl-hero__pin::before {
		/* en vertical el velo va arriba, detrás del texto */
		inset: 0 0 45% 0;
		background: linear-gradient(180deg, rgba(13, 31, 27, .75) 40%, rgba(13, 31, 27, 0));
	}
	.nl-hero__cierre { top: clamp(6.5rem, 16vh, 8rem); margin: 0; right: var(--nl-carril); font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ---------- APARICIÓN AL HACER SCROLL (assets/js/revelar.js) ---------- */
.nl-revelar { opacity: 0; }
.nl-revelar--panel.nl-visible { animation: nl-panel .9s cubic-bezier(.2, .7, .2, 1) var(--nl-retraso, 0ms) both; }
.nl-revelar--tarjeta.nl-visible { animation: nl-tarjeta .85s cubic-bezier(.2, .8, .2, 1) calc(var(--nl-retraso, 0ms) + 150ms) both; }
@keyframes nl-panel {
	from { opacity: 0; transform: translateY(60px) scale(.97); }
	to { opacity: 1; transform: none; }
}
/* las tarjetas suben inclinadas hacia atrás y se enderezan, con un destello verde en el borde */
@keyframes nl-tarjeta {
	0% { opacity: 0; transform: perspective(900px) translateY(46px) rotateX(18deg) scale(.94); border-color: rgba(52, 211, 153, .0); }
	60% { opacity: 1; border-color: rgba(52, 211, 153, .55); box-shadow: 0 0 28px -6px rgba(52, 211, 153, .35); }
	100% { opacity: 1; transform: none; }
}

/* ---------- BLOQUE DE CONTACTO (#empecemos): texto a la izquierda, formulario a la derecha ---------- */
.wp-block-post-content > section#empecemos {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	/* etiqueta, titular, pasos y texto arriba; el sobrante de altura va a la última fila */
	grid-template-rows: repeat(4, auto) 1fr;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	align-content: start;
	overflow: hidden;
	background:
		radial-gradient(34rem 26rem at 85% 40%, rgba(52, 211, 153, .13), transparent 70%),
		var(--nl-cristal);
}
#empecemos > * { grid-column: 1; }
#empecemos > .wpcf7 { grid-column: 2; grid-row: 1 / span 5; align-self: start; margin: 0; max-width: none; }
#empecemos > p:not(.has-small-font-size):not(.nl-pasos) { font-size: 1.08rem; }

/* los cuatro pasos */
#empecemos .nl-pasos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.6rem;
	margin: .4rem 0 1.4rem !important;
	counter-reset: paso;
}
#empecemos .nl-pasos span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 600;
	color: #fff;
	counter-increment: paso;
}
#empecemos .nl-pasos span::before {
	content: counter(paso);
	display: grid;
	place-items: center;
	width: 1.7rem; height: 1.7rem;
	border-radius: 50%;
	font-size: .78rem;
	color: var(--nl-esmeralda);
	background: rgba(52, 211, 153, .1);
	border: 1px solid rgba(52, 211, 153, .35);
}
#empecemos .nl-pasos span:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -1.3rem;
	width: 1rem;
	height: 1px;
	background: linear-gradient(90deg, rgba(52, 211, 153, .7), transparent);
}
#empecemos .nl-pasos span:last-child::before { background: var(--nl-grad); color: var(--nl-noche); border-color: transparent; }

/* tarjeta del formulario */
#empecemos .wpcf7 form {
	position: relative;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1rem;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	background: linear-gradient(180deg, rgba(20, 48, 41, .85), rgba(12, 30, 26, .9));
	border: 1px solid rgba(52, 211, 153, .22);
	border-radius: 24px;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
/* línea de luz en el borde superior */
#empecemos .wpcf7 form::before {
	content: "";
	position: absolute;
	top: -1px; left: 12%; right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nl-esmeralda), transparent);
}
#empecemos .nl-form-cabecera, #empecemos .nl-campo--ancho, #empecemos .nl-form-pie { grid-column: 1 / -1; }
#empecemos .nl-form-cabecera { display: flex; flex-direction: column; gap: .3rem; padding-bottom: .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--nl-borde); }
#empecemos .nl-form-cabecera strong { font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
#empecemos .nl-form-cabecera span { font-size: .88rem; color: var(--nl-suave); }

#empecemos .nl-campo { display: block; font-size: .82rem; font-weight: 600; color: var(--nl-suave); letter-spacing: .01em; }
#empecemos .nl-campo > span:first-child { display: block; margin-bottom: .45rem; }
#empecemos .wpcf7 input[type="text"], #empecemos .wpcf7 input[type="email"], #empecemos .wpcf7 input[type="tel"], #empecemos .wpcf7 textarea {
	margin-top: 0;
	background: rgba(5, 16, 13, .55);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: .85rem 1rem;
	font-size: .98rem;
}
#empecemos .wpcf7 textarea { min-height: 110px; }
#empecemos .wpcf7 input:hover, #empecemos .wpcf7 textarea:hover { border-color: rgba(52, 211, 153, .35); }

/* "¿Qué te interesa?" como opciones pulsables */
#empecemos .nl-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
#empecemos .nl-opciones .wpcf7-list-item { margin: 0; }
#empecemos .nl-opciones label {
	display: flex;
	align-items: center;
	gap: .65rem;
	height: 100%;
	box-sizing: border-box;
	padding: .75rem .9rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(5, 16, 13, .45);
	font-size: .9rem;
	font-weight: 500;
	color: var(--nl-texto);
	cursor: pointer;
	transition: border-color .2s, background .2s, box-shadow .2s;
}
#empecemos .nl-opciones label:hover { border-color: rgba(52, 211, 153, .4); }
#empecemos .nl-opciones input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1.05rem; height: 1.05rem;
	margin: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .35);
	transition: border .2s, background .2s;
}
#empecemos .nl-opciones input:checked { border: 5px solid var(--nl-esmeralda); background: var(--nl-noche); }
#empecemos .nl-opciones input:focus-visible { outline: 2px solid var(--nl-esmeralda); outline-offset: 2px; }
#empecemos .nl-opciones label:has(input:checked) {
	border-color: rgba(52, 211, 153, .6);
	background: rgba(52, 211, 153, .1);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}

/* pie: privacidad, botón y nota */
#empecemos .nl-form-pie { display: flex; flex-direction: column; gap: .9rem; margin-top: .3rem; }
#empecemos .wpcf7-acceptance label { display: flex; align-items: center; gap: .6rem; font-weight: 400; font-size: .88rem; cursor: pointer; }
#empecemos .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
#empecemos .wpcf7-acceptance input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 1.15rem; height: 1.15rem;
	margin: 0;
	border-radius: 5px;
	border: 1.5px solid rgba(255, 255, 255, .35);
	display: grid;
	place-items: center;
}
#empecemos .wpcf7-acceptance input:checked {
	border-color: transparent;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307130f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 75% no-repeat,
		var(--nl-grad);
}
#empecemos .wpcf7-acceptance input:focus-visible { outline: 2px solid var(--nl-esmeralda); outline-offset: 2px; }
#empecemos .nl-enviar {
	width: 100%;
	padding: 1.1rem 1.7rem !important;
	font-size: 1.02rem !important;
}
#empecemos .nl-enviar:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
#empecemos .wpcf7-spinner { position: absolute; margin: 1.1rem 0 0 -3rem; }
#empecemos .nl-form-pie small { text-align: center; font-size: .78rem; }
#empecemos .wpcf7-not-valid-tip { font-size: .78rem; margin-top: .35rem; color: #fca5a5; }

@media (max-width: 900px) {
	.wp-block-post-content > section#empecemos { grid-template-columns: minmax(0, 1fr); }
	#empecemos > .wpcf7 { grid-column: 1; grid-row: auto; margin-top: 1.4rem; }
}
@media (max-width: 560px) {
	#empecemos .wpcf7 form, #empecemos .nl-opciones { grid-template-columns: 1fr; }
	#empecemos .nl-pasos { gap: .6rem 1.4rem; }
}

/* pasos en vertical con línea que los une (sustituye a la versión en fila) */
#empecemos .nl-pasos { display: grid; gap: 0; margin: .8rem 0 1.8rem !important; }
#empecemos .nl-pasos span {
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	column-gap: 1rem;
	align-items: start;
	padding-bottom: 1.2rem;
}
#empecemos .nl-pasos span::before { grid-row: 1 / span 2; width: 2.2rem; height: 2.2rem; font-size: .85rem; position: relative; z-index: 1; background: #12302a; }
#empecemos .nl-pasos span:last-child::before { background: var(--nl-grad); }
#empecemos .nl-pasos span:not(:last-child)::after {
	right: auto;
	left: calc(1.1rem - .5px);
	top: 2.2rem;
	bottom: 0;
	width: 1px;
	height: auto;
	background: linear-gradient(180deg, rgba(52, 211, 153, .6), rgba(52, 211, 153, .15));
}
#empecemos .nl-pasos b { font-weight: 600; color: #fff; line-height: 1.2; padding-top: .45rem; }
#empecemos .nl-pasos small { font-weight: 400; font-size: .92rem; color: var(--nl-suave); margin-top: .2rem; }
#empecemos .wpcf7 textarea { min-height: 0; height: 7.5rem; }
@media (max-width: 560px) { #empecemos .nl-pasos span { padding-bottom: .9rem; } }

/* =====================================================================
   v2.0 · CRISTAL VERDE CLARO (2026-10-03)
   Sustituye el verde oscuro: fondo menta con luces que se mueven
   y paneles de cristal esmerilado blanco. Va al final para mandar.
   ===================================================================== */
:root {
	--nl-fondo: #edf7f2;
	--nl-texto: #183a31;
	--nl-titulo: #0a2620;
	--nl-suave: #4a645b;
	--nl-esmeralda: #047857;
	--nl-brillo: #34d399;
	--nl-noche: #052e22;
	--nl-cristal: linear-gradient(140deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34));
	--nl-cristal-2: rgba(255, 255, 255, .5);
	--nl-borde: rgba(255, 255, 255, .85);
	--nl-borde-verde: rgba(16, 185, 129, .2);
	--nl-sombra: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 30px 70px -38px rgba(6, 78, 59, .45);
	--nl-vidrio: blur(22px) saturate(1.6);
}

/* ---------- FONDO: menta con luces de color que se mueven despacio ---------- */
body {
	background: var(--nl-fondo);
	color: var(--nl-texto);
}
body::before {
	inset: -20%;
	-webkit-mask-image: none;
	mask-image: none;
	background-size: auto;
	/* manchas grandes de color, muy desenfocadas, como una foto fuera de foco */
	background-image:
		radial-gradient(30% 26% at 18% 12%, #34d399, transparent 70%),
		radial-gradient(26% 30% at 82% 16%, #2dd4bf, transparent 70%),
		radial-gradient(22% 20% at 50% 34%, #ffffff, transparent 70%),
		radial-gradient(34% 26% at 12% 52%, #a7f3d0, transparent 70%),
		radial-gradient(28% 24% at 78% 50%, #10b981, transparent 70%),
		radial-gradient(26% 22% at 40% 70%, #bef264, transparent 70%),
		radial-gradient(30% 26% at 88% 84%, #6ee7b7, transparent 70%),
		radial-gradient(28% 24% at 14% 90%, #059669, transparent 70%),
		radial-gradient(24% 20% at 60% 96%, #ecfeff, transparent 70%),
		linear-gradient(180deg, #d9f3e7, #e9f7ef 50%, #d4efe2);
	filter: blur(60px) saturate(1.15);
	opacity: .78;
	animation: nl-aurora 30s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes nl-aurora {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); }
	100% { transform: translate3d(-3%, 2%, 0) scale(1.03) rotate(-2deg); }
}
::selection { background: rgba(52, 211, 153, .35); }
a { color: var(--nl-esmeralda); }

/* ---------- CABECERA ---------- */
.nl-header {
	background: rgba(255, 255, 255, .55);
	border: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: 0 18px 40px -26px rgba(6, 78, 59, .45);
}
.nl-marca .wp-block-site-logo img { filter: brightness(0); opacity: .88; }
.nl-marca .wp-block-site-title a { color: var(--nl-titulo); }
.nl-header .wp-block-navigation-item__content { color: var(--nl-texto); }
.nl-header .wp-block-navigation-item__content:hover,
.nl-header .current-menu-item > .wp-block-navigation-item__content { background: rgba(16, 185, 129, .12); color: var(--nl-esmeralda); }
.nl-header .wp-block-navigation__submenu-icon { color: var(--nl-texto); }
.nl-header .wp-block-navigation__submenu-container {
	background: rgba(255, 255, 255, .92) !important;
	border: 1px solid var(--nl-borde-verde) !important;
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: 0 24px 50px -24px rgba(6, 78, 59, .45);
}
.wp-block-navigation__responsive-container-open { color: var(--nl-titulo); }
.wp-block-navigation__responsive-container.is-menu-open { background: #f4fbf7 !important; color: var(--nl-texto) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--nl-texto); }
.wp-block-navigation__responsive-container-close { color: var(--nl-titulo); }

/* ---------- PANELES DE CRISTAL ---------- */
.wp-block-post-content > section.wp-block-group {
	background: var(--nl-cristal);
	border: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: var(--nl-sombra);
}
/* reflejo de luz en la esquina de cada panel */
.wp-block-post-content > section.wp-block-group:not(:first-child)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(125deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%);
}
.wp-block-post-content > section.wp-block-group > * { position: relative; }
.wp-block-post-content h1, .wp-block-post-content h2, .wp-block-post-content h3 { color: var(--nl-titulo); }
.wp-block-post-content section > p:not(.has-small-font-size) { color: var(--nl-suave); }

.wp-block-post-content p.has-small-font-size:has(> strong) {
	background: rgba(255, 255, 255, .6);
	border: 1px solid var(--nl-borde-verde);
	color: var(--nl-esmeralda);
}
.wp-block-post-content p.has-small-font-size:has(> strong)::before { background: #10b981; box-shadow: 0 0 10px 2px rgba(16, 185, 129, .45); }

/* ---------- PORTADA: a pantalla completa, texto + escaparate de webs ---------- */
.wp-block-post-content > section.wp-block-group:first-child {
	background: none;
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(2rem, 4vw, 4.5rem);
	align-content: center;
	overflow: visible;
	min-height: min(100vh, 940px);
}
.wp-block-post-content > section.wp-block-group:first-child::after { display: none; }
.wp-block-post-content > section.wp-block-group:first-child > * { grid-column: 1; }
.wp-block-post-content > section.wp-block-group:first-child h1 {
	font-size: clamp(2.6rem, 5.4vw, 4.6rem);
	max-width: 13ch;
	background: linear-gradient(100deg, var(--nl-titulo) 0%, var(--nl-titulo) 52%, #059669 82%, #14b8a6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-block-post-content > section.wp-block-group:first-child > p:not(.has-small-font-size) { color: var(--nl-suave); }

.nl-escaparate {
	grid-column: 2 !important;
	grid-row: 1 / span 5;
	align-self: center;
	position: relative;
	margin: 0 !important;
	padding: 1.5rem 3.2rem 3.5rem 2.4rem;
}
/* luz detrás del portátil */
.nl-escaparate::before {
	content: "";
	position: absolute;
	inset: 6% 4% 12% 10%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(52, 211, 153, .55), rgba(45, 212, 191, .25) 55%, transparent);
	filter: blur(30px);
}
.nl-portatil { position: relative; animation: nl-flotar 7s ease-in-out infinite; }
.nl-portatil__pantalla {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 14px 14px 4px 4px;
	padding: 2.2% 2.2% 2.6%;
	background: linear-gradient(180deg, #1c2b27, #0c1714);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 40px 70px -30px rgba(6, 78, 59, .6);
}
.nl-portatil__pantalla::after {
	content: "";
	position: absolute;
	inset: 2.2% 2.2% 2.6%;
	border-radius: 4px;
	background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 30%);
	pointer-events: none;
}
.nl-portatil__base {
	height: clamp(10px, 1.6vw, 16px);
	margin: 0 -7%;
	border-radius: 0 0 18px 18px;
	background: linear-gradient(180deg, #e7efeb 0%, #b9c9c2 60%, #93a69e 100%);
	box-shadow: 0 18px 30px -14px rgba(6, 78, 59, .5);
	position: relative;
}
.nl-portatil__base::before {
	content: "";
	position: absolute;
	left: 50%; top: 0;
	width: 16%; height: 40%;
	transform: translateX(-50%);
	border-radius: 0 0 8px 8px;
	background: rgba(0, 0, 0, .12);
}
.nl-movil {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 25%;
	z-index: 2;
	animation: nl-flotar 7s ease-in-out -3.5s infinite;
}
.nl-movil__pantalla {
	position: relative;
	aspect-ratio: 462 / 1000;
	border-radius: 22px;
	padding: 5%;
	background: #0c1714;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35) inset, 0 30px 50px -18px rgba(6, 40, 30, .65);
}
.nl-portatil__pantalla img, .nl-movil__pantalla img {
	position: absolute;
	inset: 2.2% 2.2% 2.6%;
	width: 95.6%;
	height: 95.2%;
	object-fit: cover;
	object-position: top;
	border-radius: 4px;
	opacity: 0;
	animation: nl-pase 20s infinite both;
}
.nl-movil__pantalla img { inset: 5%; width: 90%; height: 90%; border-radius: 16px; }
.nl-escaparate img:nth-child(1), .nl-rotulo span:nth-of-type(1) { animation-delay: -1s; }
.nl-escaparate img:nth-child(2), .nl-rotulo span:nth-of-type(2) { animation-delay: 3s; }
.nl-escaparate img:nth-child(3), .nl-rotulo span:nth-of-type(3) { animation-delay: 7s; }
.nl-escaparate img:nth-child(4), .nl-rotulo span:nth-of-type(4) { animation-delay: 11s; }
.nl-escaparate img:nth-child(5), .nl-rotulo span:nth-of-type(5) { animation-delay: 15s; }
@keyframes nl-pase {
	0% { opacity: 0; transform: scale(1.03); }
	4% { opacity: 1; transform: scale(1); }
	20% { opacity: 1; }
	24% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes nl-flotar {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* chapas de cristal a la derecha, como etiquetas de producto */
.nl-chapas {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-58%);
	z-index: 3;
	list-style: none;
	margin: 0;
	padding: .55rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	border-radius: 22px;
	background: rgba(255, 255, 255, .5);
	border: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: var(--nl-sombra);
}
.nl-chapas li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .6rem .55rem;
	text-align: center;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--nl-titulo);
}
.nl-chapas li + li { border-top: 1px solid rgba(16, 185, 129, .18); }
.nl-chapas svg {
	width: 2.4rem;
	height: 2.4rem;
	padding: .55rem;
	box-sizing: border-box;
	border-radius: 50%;
	fill: none;
	stroke: #047857;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(16, 185, 129, .35);
}
/* rótulo con el nombre de la web que se está viendo */
.nl-rotulo {
	position: absolute;
	right: 3.2rem;
	bottom: .6rem;
	z-index: 3;
	margin: 0 !important;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: .55rem;
	min-width: 15.5rem;
	padding: .55rem .95rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: 0 14px 30px -18px rgba(6, 78, 59, .5);
	font-size: .8rem;
	font-weight: 600;
	color: var(--nl-titulo) !important;
}
.nl-rotulo i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #34d399; }
.nl-rotulo span { grid-column: 2; grid-row: 1; opacity: 0; animation: nl-pase 20s infinite both; white-space: nowrap; }

@media (max-width: 960px) {
	.wp-block-post-content > section.wp-block-group:first-child { min-height: 0; }
	.nl-escaparate { grid-column: 1 !important; grid-row: auto; margin-top: 2.6rem !important; padding: .5rem 2.6rem 3.4rem 1.4rem; }
}
@media (max-width: 560px) {
	.nl-escaparate { padding: 0 2.2rem 3.2rem .6rem; }
	.nl-chapas { padding: .35rem; border-radius: 16px; }
	.nl-chapas li { padding: .4rem .3rem; font-size: .52rem; }
	.nl-chapas svg { width: 1.9rem; height: 1.9rem; padding: .42rem; }
	.nl-movil { width: 28%; }
	.nl-movil__pantalla { border-radius: 14px; }
	.nl-movil__pantalla img { border-radius: 10px; }
	.nl-rotulo { right: auto; left: 30%; min-width: 0; font-size: .7rem; padding: .45rem .75rem; }
}

/* ---------- TARJETAS ---------- */
.wp-block-post-content .wp-block-column {
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -30px rgba(6, 78, 59, .45);
}
.wp-block-post-content .wp-block-column:hover { border-color: rgba(16, 185, 129, .45); background: rgba(255, 255, 255, .72); }
.wp-block-post-content .wp-block-column p { color: var(--nl-suave); }
.wp-block-post-content .wp-block-column a { color: var(--nl-esmeralda); }
.wp-block-post-content .wp-block-column h3::first-letter { color: inherit; }
.wp-block-post-content .wp-block-column:has(> .wp-block-image) > p:first-of-type:not(:last-child) { color: var(--nl-esmeralda); }
.wp-block-post-content .wp-block-column > .wp-block-image img { box-shadow: 0 10px 24px -16px rgba(6, 40, 30, .5); }

/* ---------- LISTAS, PREGUNTAS ---------- */
.wp-block-post-content ul.wp-block-list li { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); color: var(--nl-texto); }
.wp-block-post-content .wp-block-details { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); }
.wp-block-post-content .wp-block-details summary { color: var(--nl-titulo); }
.wp-block-post-content .wp-block-details summary::after { background: rgba(16, 185, 129, .14); color: var(--nl-esmeralda); }
.wp-block-post-content .wp-block-details p { color: var(--nl-suave); }

/* ---------- BOTONES ---------- */
.wp-block-button__link, .wpcf7-submit { color: var(--nl-noche) !important; box-shadow: 0 12px 30px -12px rgba(16, 185, 129, .7), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.wp-block-post-content .wp-block-button + .wp-block-button .wp-block-button__link {
	background: rgba(255, 255, 255, .55) !important;
	color: var(--nl-titulo) !important;
	border: 1px solid rgba(255, 255, 255, .95) !important;
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: 0 10px 26px -16px rgba(6, 78, 59, .45);
}

/* ---------- FORMULARIOS ---------- */
.wpcf7 form { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .9); }
.wpcf7 label, .wpcf7 .wpcf7-acceptance, .wpcf7 small { color: var(--nl-suave); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"],
.wpcf7 select, .wpcf7 textarea {
	color: var(--nl-titulo);
	background: rgba(255, 255, 255, .78);
	border: 1px solid rgba(16, 185, 129, .22);
	color-scheme: light;
}
.wpcf7 ::placeholder { color: rgba(74, 100, 91, .6); }

.wp-block-post-content > section#empecemos {
	background:
		radial-gradient(34rem 26rem at 85% 40%, rgba(52, 211, 153, .22), transparent 70%),
		var(--nl-cristal);
}
#empecemos .nl-pasos span, #empecemos .nl-pasos b { color: var(--nl-titulo); }
#empecemos .nl-pasos small { color: var(--nl-suave); }
#empecemos .nl-pasos span::before { background: #fff; color: var(--nl-esmeralda); border-color: rgba(16, 185, 129, .4); }
#empecemos .nl-pasos span:last-child::before { background: var(--nl-grad); color: var(--nl-noche); }
#empecemos .wpcf7 form {
	background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
	border: 1px solid rgba(255, 255, 255, .95);
	box-shadow: 0 30px 70px -36px rgba(6, 78, 59, .5), 0 1px 0 #fff inset;
}
#empecemos .nl-form-cabecera { border-bottom-color: rgba(16, 185, 129, .18); }
#empecemos .nl-form-cabecera strong { color: var(--nl-titulo); }
#empecemos .nl-form-cabecera span, #empecemos .nl-campo { color: var(--nl-suave); }
#empecemos .wpcf7 input[type="text"], #empecemos .wpcf7 input[type="email"], #empecemos .wpcf7 input[type="tel"], #empecemos .wpcf7 textarea {
	background: rgba(255, 255, 255, .85);
	border: 1px solid rgba(16, 185, 129, .22);
}
#empecemos .nl-opciones label { background: rgba(255, 255, 255, .7); border: 1px solid rgba(16, 185, 129, .2); color: var(--nl-texto); }
#empecemos .nl-opciones input, #empecemos .wpcf7-acceptance input { border-color: rgba(4, 120, 87, .45); }
#empecemos .nl-opciones input:checked { border-color: #10b981; background: #fff; }
#empecemos .nl-opciones label:has(input:checked) { background: rgba(209, 250, 229, .8); border-color: rgba(16, 185, 129, .6); }
#empecemos .wpcf7-not-valid-tip { color: #b91c1c; }

/* ---------- BLOG Y PÁGINAS CON TÍTULO ---------- */
.wp-block-latest-posts li { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); }
.wp-block-latest-posts a, main .wp-block-post-title { color: var(--nl-titulo); }
body:not(.page-template-page-no-title) main > .wp-block-group {
	background: var(--nl-cristal);
	border: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	box-shadow: var(--nl-sombra);
}

/* ---------- PIE: cristal también ---------- */
.nl-pie {
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .72));
	border-top: 1px solid var(--nl-borde);
	-webkit-backdrop-filter: var(--nl-vidrio);
	backdrop-filter: var(--nl-vidrio);
	color: var(--nl-suave);
}
.nl-pie h4 { color: var(--nl-titulo); }
.nl-pie a { color: var(--nl-suave); }
.nl-pie a:hover { color: var(--nl-esmeralda); }
.nl-pie .wp-block-image img { filter: brightness(0); opacity: .85; }
.nl-pie .nl-legal { border-top-color: rgba(16, 185, 129, .18); color: #6b827a; }

@media (prefers-reduced-motion: reduce) {
	body::before, .nl-portatil, .nl-movil { animation: none; }
	.nl-escaparate img, .nl-rotulo span { animation: none; opacity: 0; }
	.nl-escaparate img:nth-child(1), .nl-rotulo span:nth-of-type(1) { opacity: 1; }
}

/* ajustes de la portada: escaparate más grande y chapas al borde */
@media (min-width: 961px) {
	.wp-block-post-content > section.wp-block-group:first-child:has(> .nl-escaparate) { grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr); }
}
.wp-block-post-content > section.wp-block-group:first-child h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); max-width: 14ch; }
.nl-escaparate { padding: 1rem 1.6rem 3.6rem 2.2rem; }
.nl-chapas { right: -1.4rem; }
.nl-portatil__base { background: linear-gradient(180deg, #d5e0db 0%, #94a8a0 55%, #6b8078 100%); }
@media (max-width: 960px) { .nl-escaparate { padding: .5rem 1.6rem 3.4rem 1.4rem; } .nl-chapas { right: -.6rem; } }
@media (max-width: 560px) {
	.nl-escaparate { padding: 0 1.4rem 3.2rem .6rem; }
	.nl-chapas { right: -.9rem; top: 40%; }
	.nl-chapas li span { display: none; }
	.nl-chapas li { padding: .35rem; }
}

/* páginas interiores: el matraz del logo, suave, a la derecha de la cabecera */
.wp-block-post-content > section.wp-block-group:first-child:not(:has(> .nl-escaparate))::after {
	display: block;
	background-image: url("assets/mark-dark.png");
	opacity: .07;
}