/* ==========================================================================
   CrecIA · estilos del tema
   Se escribe primero para móvil; los anchos mayores se añaden con min-width.
   ========================================================================== */

:root {
	--fondo: #0B1220;
	--fondo-suave: #0F1930;
	--panel: #111D36;
	--panel-alto: #16264A;
	--texto: #F3F6FA;
	--apagado: #9AA7BD;
	--acento: #2FD57B;
	--acento-suave: rgba(47, 213, 123, .13);
	--acento-borde: rgba(47, 213, 123, .35);
	--tinta: #06130C;
	--borde: rgba(154, 167, 189, .16);
	--radio: 18px;
	--radio-grande: 28px;
	--margen: 20px;
	--ancho: 1200px;
	--barra: 68px;
	--seccion: clamp(72px, 10vw, 128px);
	--suave: cubic-bezier(.2, .65, .3, 1);
	--titulos: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--barra) + 16px);
	scrollbar-color: #24345A var(--fondo);
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, video, canvas, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
	font-family: var(--titulos);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.022em;
	text-wrap: balance;
	margin: 0;
}
p, ul, ol, figure { margin: 0; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acento); color: var(--tinta); }

.cr-saltar {
	position: absolute; left: 12px; top: -80px; z-index: 300;
	background: var(--acento); color: var(--tinta); font-weight: 600;
	padding: 10px 16px; border-radius: 10px;
}
.cr-saltar:focus { top: 12px; }

.cr-ancho {
	width: 100%;
	max-width: calc(var(--ancho) + var(--margen) * 2);
	margin-inline: auto;
	padding-inline: var(--margen);
}
.cr-ancho--lectura { max-width: calc(760px + var(--margen) * 2); }

/* WordPress separa los bloques con un margen propio; aquí cada pieza pone el suyo. */
.cr-pagina :where(.wp-block-group) > * { margin-block: 0; }

/* ---------- botones ---------- */

.cr-boton,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--acento);
	color: var(--tinta);
	font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2;
	text-align: center; text-decoration: none;
	cursor: pointer;
	position: relative; overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .25s var(--suave), box-shadow .25s var(--suave), border-color .25s, color .25s, background-color .25s;
}
/* Destello que cruza el botón al pasar el cursor. */
.cr-boton::after,
.wp-block-button__link::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .7s var(--suave);
}
.cr-boton:hover::after,
.wp-block-button__link:hover::after { transform: translateX(120%); }
.cr-boton:hover,
.wp-block-button__link:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 34px rgba(47, 213, 123, .32);
}
.cr-boton--linea,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(17, 29, 54, .55);
	border-color: var(--borde);
	color: var(--texto);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.cr-boton--linea:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--acento); color: var(--acento); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cr-boton--pequeno { min-height: 42px; padding: 9px 20px; font-size: .9rem; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons.cr-centro { justify-content: center; margin-top: 44px; }

/* ---------- barra de navegación ---------- */

.cr-barra {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--barra);
	display: flex; align-items: center;
	border-bottom: 1px solid transparent;
	transition: background-color .3s, border-color .3s;
}
.cr-barra.es-fija,
.cr-barra.es-abierta {
	background: rgba(11, 18, 32, .86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--borde);
}
/* Línea que se llena según se baja por la página (solo en navegadores que lo permiten sin JavaScript). */
.cr-barra::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--acento));
	transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
	.cr-barra::after { animation: cr-progreso linear both; animation-timeline: scroll(root); }
}
@keyframes cr-progreso { to { transform: scaleX(1); } }
.admin-bar .cr-barra { top: 46px; }
@media (min-width: 783px) { .admin-bar .cr-barra { top: 32px; } }

.cr-barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.cr-logo {
	font-family: var(--titulos); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em;
	color: var(--texto);
}
.cr-logo:hover { text-decoration: none; }
.cr-logo em { font-style: normal; color: var(--acento); }

.cr-hamburguesa {
	display: grid; place-content: center; gap: 5px;
	width: 46px; height: 46px; margin-right: -10px;
	background: none; border: 0; cursor: pointer;
}
.cr-hamburguesa span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--texto); transition: transform .3s var(--suave), opacity .2s; }
.es-abierta .cr-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.es-abierta .cr-hamburguesa span:nth-child(2) { opacity: 0; }
.es-abierta .cr-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Se coloca respecto a la barra y no a la ventana: el desenfoque de la barra
   la convierte en el marco de referencia de sus hijos con posición fija. */
.cr-menu {
	position: absolute; top: 100%; left: 0; right: 0;
	height: calc(100dvh - var(--barra));
	display: none; flex-direction: column; gap: 22px;
	padding: 24px var(--margen) 40px;
	background: var(--fondo);
	overflow-y: auto;
}
.es-abierta .cr-menu { display: flex; }

.cr-menu ul { list-style: none; margin: 0; padding: 0; }
.cr-menu__lista > li { border-bottom: 1px solid var(--borde); }
.cr-menu__lista a {
	display: block; padding: 15px 0;
	color: var(--texto); font-family: var(--titulos); font-size: 1.25rem; font-weight: 500;
}
.cr-menu__lista a:hover { color: var(--acento); text-decoration: none; }
.cr-menu__lista .sub-menu { padding: 0 0 12px 14px; border-left: 1px solid var(--borde); margin-bottom: 14px; }
.cr-menu__lista .sub-menu a { padding: 8px 0; font-family: inherit; font-size: 1rem; font-weight: 400; color: var(--apagado); }
.cr-menu > .cr-boton { align-self: flex-start; }

@media (min-width: 1000px) {
	:root { --barra: 76px; --margen: 32px; }
	.cr-hamburguesa { display: none; }
	.cr-menu {
		position: static; height: auto; display: flex; flex-direction: row; align-items: center; gap: 30px;
		padding: 0; background: none; overflow: visible;
	}
	.cr-menu__lista { display: flex; align-items: center; gap: 28px; }
	.cr-menu__lista > li { position: relative; border: 0; }
	.cr-menu__lista a { padding: 10px 0; font-family: inherit; font-size: .94rem; color: var(--apagado); transition: color .2s; }
	.cr-menu__lista > li:hover > a,
	.cr-menu__lista .current-menu-item > a,
	.cr-menu__lista .current-menu-ancestor > a { color: var(--texto); }
	.cr-menu__lista .menu-item-has-children > a::after {
		content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	}
	.cr-menu__lista .sub-menu {
		position: absolute; top: 100%; left: -18px; min-width: 250px;
		margin: 0; padding: 10px;
		background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
		opacity: 0; visibility: hidden; transform: translateY(8px);
		transition: opacity .2s, transform .2s var(--suave), visibility .2s;
	}
	.cr-menu__lista li:hover > .sub-menu,
	.cr-menu__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.cr-menu__lista .sub-menu a { padding: 10px 12px; border-radius: 10px; font-size: .94rem; }
	.cr-menu__lista .sub-menu a:hover { background: var(--acento-suave); color: var(--texto); }
	.cr-menu > .cr-boton { align-self: center; }
}

/* ---------- portada de inicio ---------- */

.cr-heroe {
	position: relative;
	display: flex; align-items: center;
	min-height: 100svh;
	padding: calc(var(--barra) + 48px) 0 72px;
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(rgba(154, 167, 189, .08) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(154, 167, 189, .08) 1px, transparent 1px) 0 0 / 64px 64px;
}
.cr-heroe::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(60% 55% at 85% 10%, rgba(30, 122, 76, .38), transparent 70%),
		radial-gradient(50% 50% at 0% 100%, rgba(21, 58, 102, .55), transparent 70%);
}
.cr-heroe::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 160px; z-index: -1;
	background: linear-gradient(to bottom, transparent, var(--fondo));
}
.cr-heroe > .cr-escena {
	position: absolute; inset: 0; z-index: -1; opacity: .6;
	/* En móvil la escena queda debajo del texto: solo se deja ver en la parte baja. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 80%);
	mask-image: linear-gradient(to bottom, transparent 45%, #000 80%);
}
.cr-heroe__contenido { max-width: 700px; }
.cr-heroe__contenido > * + * { margin-top: 24px; }

.cr-insignia {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px;
	border: 1px solid var(--acento-borde); border-radius: 999px;
	background: var(--acento-suave);
	color: var(--acento); font-size: .9rem; font-weight: 500; line-height: 1.35;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cr-insignia::before {
	content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
	animation: cr-latido 2s infinite;
}
@keyframes cr-latido {
	0%, 100% { box-shadow: 0 0 0 0 rgba(47, 213, 123, .5); }
	50% { box-shadow: 0 0 0 7px rgba(47, 213, 123, 0); }
}

.cr-heroe__titulo { font-size: clamp(2.35rem, 7.4vw, 4.6rem); letter-spacing: -.03em; word-spacing: .06em; line-height: 1.04; }
.cr-heroe__titulo em {
	font-style: normal; color: var(--acento);
	background: linear-gradient(100deg, #2FD57B 20%, #9BF5C4 50%, #2FD57B 80%) 0 0 / 200% 100%;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	animation: cr-brillo 6s linear infinite;
}
@keyframes cr-brillo { to { background-position: -200% 0; } }
.cr-heroe__lema { max-width: 760px; text-wrap: balance; color: var(--texto); font-size: clamp(1.22rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.35; }
.cr-heroe__contenido > .cr-heroe__lema + .cr-heroe__texto { margin-top: 12px; }
.cr-heroe__texto { max-width: 600px; color: var(--apagado); font-size: clamp(1.06rem, 2.2vw, 1.22rem); }
.cr-heroe__nota { max-width: 560px; color: var(--apagado); font-size: .88rem; }
.cr-heroe__nota strong { color: var(--acento); font-weight: 600; }

@media (max-width: 999px) {
	/* Hueco para el botón flotante de WhatsApp, que cae justo sobre el final de esta nota. */
	.cr-heroe__nota { max-width: calc(100% - 64px); }
}
@media (min-width: 1000px) {
	.cr-heroe > .cr-escena { opacity: 1; -webkit-mask-image: none; mask-image: none; }
	.cr-heroe__contenido > * + * { margin-top: 28px; }
}

/* ---------- escena 3D ---------- */

.cr-escena { position: relative; width: 100%; height: 100%; pointer-events: none; }
.cr-escena canvas,
.cr-escena video { display: block; width: 100%; height: 100%; }
.cr-escena video { object-fit: cover; }
/* El fondo oscuro del vídeo o de la secuencia se funde con el de la página: solo quedan los puntos de luz. */
.cr-escena--video video,
.cr-escena--secuencia canvas,
.cr-escena--secuencia img { mix-blend-mode: screen; }
.cr-escena--secuencia img { display: block; width: 100%; height: 100%; }
.cr-heroe > .cr-escena--video video { object-position: right center; }
.cr-historia__escena .cr-escena--video video,
.cr-historia__escena .cr-escena--secuencia canvas,
.cr-historia__escena .cr-escena--secuencia img { object-fit: contain; }
@media (max-width: 999px) {
	/* En móvil la escena no lleva marco: se difuminan sus bordes para que no se note el cuadrado. */
	.cr-historia__escena .cr-escena--video video,
	.cr-historia__escena .cr-escena--secuencia canvas,
	.cr-historia__escena .cr-escena--secuencia img {
		-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
		mask-image: radial-gradient(closest-side, #000 62%, transparent);
	}
}

/* ---------- marquesina de sectores ---------- */

.cr-marquesina {
	position: relative; overflow: hidden;
	padding: 20px 0;
	border-block: 1px solid var(--borde);
	background: var(--fondo-suave);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cr-marquesina__lista {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
	list-style: none; margin: 0; padding: 0 var(--margen);
	color: var(--apagado); font-family: var(--titulos); font-size: 1.02rem; font-weight: 500; white-space: nowrap;
}
.cr-marquesina__lista li { display: flex; align-items: center; gap: 34px; }
.cr-marquesina__lista li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); opacity: .7; }
.cr-marquesina.es-activa .cr-marquesina__lista {
	flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0;
	animation: cr-marquesina 38s linear infinite;
}
.cr-marquesina.es-activa:hover .cr-marquesina__lista { animation-play-state: paused; }
@keyframes cr-marquesina { to { transform: translateX(-50%); } }

/* ---------- secciones ---------- */

.cr-seccion { position: relative; padding-block: var(--seccion); }
.cr-seccion--suave {
	background: var(--fondo-suave);
	border-block: 1px solid;
	border-image: linear-gradient(90deg, transparent, rgba(47, 213, 123, .32) 30%, rgba(154, 167, 189, .2) 70%, transparent) 1;
}
.cr-seccion--pegada { padding-top: 0; }
.cr-seccion--cta { padding-top: 0; }
.cr-seccion--suave + .cr-seccion--cta { padding-top: var(--seccion); }

.cr-cabecera { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px) !important; }
.cr-cabecera > * + * { margin-top: 16px !important; }

.cr-antetitulo {
	display: flex; align-items: center; gap: 10px;
	color: var(--acento); font-size: 1.02rem; font-weight: 500;
}
.cr-antetitulo::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--acento); box-shadow: 0 0 12px 1px rgba(47, 213, 123, .7); }
.cr-antetitulo a { color: inherit; }

.cr-titulo { font-size: clamp(1.8rem, 4.4vw, 2.9rem); }
.cr-entradilla { color: var(--apagado); font-size: clamp(1.02rem, 1.8vw, 1.14rem); max-width: 660px; }

/* ---------- rejillas y tarjetas ---------- */

.cr-rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
	.cr-rejilla { gap: 22px; }
	.cr-rejilla--2, .cr-rejilla--3, .cr-rejilla--4, .cr-rejilla--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.cr-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cr-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cr-rejilla--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cr-rejilla--bento > :nth-child(4n + 1), .cr-rejilla--bento > :nth-child(4n) { grid-column: span 4; }
	.cr-rejilla--bento > :nth-child(4n + 2), .cr-rejilla--bento > :nth-child(4n + 3) { grid-column: span 2; }
}

.cr-tarjeta {
	position: relative;
	display: flex; flex-direction: column; gap: 12px;
	padding: clamp(24px, 3vw, 34px);
	/* Relleno, color del borde y luz del borde (la luz solo se enciende con el cursor encima). */
	--relleno: linear-gradient(160deg, var(--panel), #0D1830 85%);
	--filo: var(--borde);
	--luz: transparent;
	background:
		var(--relleno) padding-box,
		radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), var(--luz), transparent 70%) border-box,
		linear-gradient(var(--filo), var(--filo)) border-box;
	border: 1px solid transparent;
	border-radius: var(--radio);
	overflow: hidden;
	transition: transform .35s var(--suave), box-shadow .35s;
}
/* Luz que sigue al cursor (la posición la pone main.js). */
.cr-tarjeta::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(380px circle at var(--x, 50%) var(--y, 0%), rgba(47, 213, 123, .13), transparent 60%);
	transition: opacity .35s;
}
@media (hover: hover) {
	.cr-tarjeta:hover { --luz: rgba(47, 213, 123, .85); transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, .42); }
	.cr-tarjeta:hover::after { opacity: 1; }
}
.cr-tarjeta :is(h2, h3) { font-size: 1.24rem; letter-spacing: -.01em; }
.cr-tarjeta :is(h2, h3) a { color: inherit; }
.cr-tarjeta p { color: var(--apagado); font-size: .97rem; }
.cr-tarjeta > * { position: relative; z-index: 1; }

.cr-tarjeta--destacada { --relleno: linear-gradient(150deg, #0F2A1D, var(--panel) 80%); --filo: var(--acento-borde); justify-content: center; }
.cr-tarjeta--destacada p { color: var(--texto); font-size: 1.06rem; }

.cr-ico::before {
	content: ""; display: block; flex: none;
	width: 48px; height: 48px; margin-bottom: 10px;
	border: 1px solid rgba(47, 213, 123, .22); border-radius: 13px;
	background:
		var(--ico) center / 24px no-repeat,
		linear-gradient(180deg, rgba(47, 213, 123, .17), rgba(47, 213, 123, .04));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: transform .35s var(--suave), box-shadow .35s, border-color .35s;
}
@media (hover: hover) {
	.cr-tarjeta.cr-ico:hover::before {
		transform: translateY(-2px); border-color: rgba(47, 213, 123, .5);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 26px rgba(47, 213, 123, .22);
	}
}

.cr-etiqueta {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 10px; border: 1px solid var(--acento-borde); border-radius: 999px;
	background: var(--acento-suave); color: var(--acento) !important;
	font-size: .8rem !important; font-weight: 500; line-height: 1.5;
}
.cr-etiqueta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cr-ico > .cr-etiqueta { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); }

.cr-mas { margin-top: auto !important; padding-top: 6px; }
.cr-mas a { font-size: .92rem; font-weight: 600; }
.cr-mas a::after { content: "→"; display: inline-block; margin-left: 7px; transition: transform .25s var(--suave); }
.cr-mas a:hover::after { transform: translateX(4px); }

/* Muestra de una aplicación: captura arriba. */
.cr-muestra { padding: 0; gap: 0; }
.cr-muestra > :not(.cr-muestra__imagen) { margin-inline: clamp(22px, 3vw, 32px); }
.cr-muestra > h3 { margin-top: 12px; }
.cr-muestra > h3 + p { margin-top: 10px; }
.cr-muestra > .cr-etiqueta { margin-top: 22px; }
.cr-muestra > .cr-mas { padding-block: 16px 28px; }
.cr-muestra__imagen { aspect-ratio: 16 / 9; overflow: hidden; background: #0A101C; border-bottom: 1px solid var(--borde); }
.cr-muestra__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s var(--suave); }
.cr-muestra__imagen + h3 { margin-top: 24px; }
@media (hover: hover) { .cr-muestra:hover .cr-muestra__imagen img { transform: scale(1.04); } }

/* Entrada del blog. */
.cr-tarjeta__imagen { display: block; margin: calc(clamp(24px, 3vw, 34px) * -1); margin-bottom: 8px; aspect-ratio: 16 / 10; overflow: hidden; }
.cr-tarjeta__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-tarjeta__fecha { font-size: .88rem !important; font-weight: 500; }
.cr-tarjeta--entrada :is(h2, h3) a:hover { color: var(--acento); text-decoration: none; }

/* Pasos numerados. */
.cr-paso__n {
	font-family: var(--titulos); font-size: 3rem !important; font-weight: 700; line-height: 1;
	color: transparent !important; -webkit-text-stroke: 1.5px rgba(47, 213, 123, .6);
}
.cr-paso > .cr-etiqueta { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); }

/* ---------- la historia: escena fija + pasos que pasan ---------- */

.cr-historia { display: grid; gap: 24px; }
.cr-historia__escena {
	position: sticky; top: var(--barra); z-index: 2;
	height: 42svh; min-height: 240px;
	margin-inline: calc(var(--margen) * -1);
	background: linear-gradient(to bottom, var(--fondo-suave) 82%, transparent);
}
.cr-historia__pasos { display: grid; gap: 18px; }
.cr-historia__paso {
	display: flex; flex-direction: column; gap: 12px;
	padding: 26px 24px;
	border: 1px solid var(--borde); border-radius: var(--radio);
	background: rgba(17, 29, 54, .6);
	transition: opacity .4s, border-color .4s, background-color .4s;
}
.cr-historia__paso h3 { font-size: 1.3rem; }
.cr-historia__paso p:last-child { color: var(--apagado); }
.cr-js .cr-historia__paso { opacity: .45; }
.cr-js .cr-historia__paso.es-activo { opacity: 1; border-color: var(--acento-borde); background: var(--panel); }

@media (min-width: 1000px) {
	.cr-historia { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
	.cr-historia__escena {
		top: calc(var(--barra) + 24px);
		height: calc(100svh - var(--barra) - 48px); max-height: 640px;
		margin: 0;
		background: radial-gradient(60% 60% at 50% 50%, rgba(47, 213, 123, .07), transparent 70%), var(--fondo-suave);
		border: 1px solid var(--borde); border-radius: var(--radio-grande);
		overflow: hidden;
	}
	.cr-historia__escena .cr-escena--secuencia canvas,
	.cr-historia__escena .cr-escena--video video { object-fit: cover; }
	.cr-historia__pasos { gap: 0; }
	.cr-historia__paso { min-height: 62svh; justify-content: center; padding: 0; border: 0; background: none !important; }
	.cr-historia__paso h3 { font-size: 1.9rem; }
	.cr-historia__paso p:last-child { font-size: 1.1rem; max-width: 460px; }
	.cr-js .cr-historia__paso { opacity: .22; }
}

/* ---------- cifras ---------- */

.cr-cifras { display: grid; gap: 16px; margin-top: 22px !important; }
.cr-cifra {
	padding: 28px 24px; border: 1px solid var(--borde); border-radius: var(--radio); text-align: center;
	background: linear-gradient(180deg, rgba(47, 213, 123, .07), transparent 55%);
}
.cr-cifra__num {
	font-family: var(--titulos); font-size: clamp(2.3rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
	color: var(--acento);
	background: linear-gradient(180deg, #B6F8D3, #2FD57B 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cr-cifra__texto { margin-top: 8px !important; color: var(--apagado); font-size: .92rem; }
@media (min-width: 700px) { .cr-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

/* ---------- dos columnas ---------- */

.cr-dos { display: grid; gap: 28px; align-items: start; }
.cr-dos > .wp-block-group:not(.cr-tarjeta) > * + * { margin-top: 18px; }
.cr-dos > .wp-block-group:not(.cr-tarjeta) p { color: var(--apagado); }
@media (min-width: 900px) {
	.cr-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
	.cr-dos--contacto { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
	.cr-dos:has(> .cr-tarjeta + .cr-tarjeta) { align-items: stretch; }
}

.cr-lista-check, .cr-lista-no { list-style: none; padding: 0; display: grid; gap: 14px; }
.cr-lista-check li, .cr-lista-no li { position: relative; padding-left: 38px; color: var(--apagado); }
.cr-lista-check li strong, .cr-lista-no li strong { color: var(--texto); font-weight: 600; }
.cr-lista-check li::before, .cr-lista-no li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--acento-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FD57B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.500l3.500 3.500L17 9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cr-lista-no li::before {
	background: rgba(154, 167, 189, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA7BD' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ---------- preguntas ---------- */

.cr-preguntas { max-width: 860px; display: grid; gap: 12px; }
.cr-preguntas details { border: 1px solid var(--borde); border-radius: 16px; background: var(--panel); transition: border-color .3s; }
.cr-preguntas details[open] { border-color: var(--acento-borde); }
.cr-preguntas summary {
	position: relative; padding: 20px 56px 20px 22px;
	font-family: var(--titulos); font-size: 1.08rem; font-weight: 600; cursor: pointer; list-style: none;
}
.cr-preguntas summary::-webkit-details-marker { display: none; }
.cr-preguntas summary::after {
	content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
	border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
	transform: rotate(45deg); transition: transform .3s var(--suave);
}
.cr-preguntas details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.cr-preguntas details p { margin: 0; padding: 0 22px 22px; color: var(--apagado); }

/* ---------- llamada a la acción ---------- */

.cr-cta {
	position: relative; overflow: hidden;
	padding: clamp(44px, 8vw, 88px) clamp(22px, 5vw, 60px);
	border: 1px solid var(--acento-borde); border-radius: var(--radio-grande);
	background: linear-gradient(150deg, #0F2A1D, var(--fondo) 75%);
	text-align: center;
}
.cr-cta::before {
	content: ""; position: absolute; left: 50%; top: -220px; width: 480px; height: 480px; margin-left: -240px;
	border-radius: 50%; background: radial-gradient(circle, rgba(47, 213, 123, .24), transparent 65%); filter: blur(30px);
	pointer-events: none;
}
.cr-cta::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(rgba(154, 167, 189, .07) 1px, transparent 1px) 50% 0 / 48px 48px,
		linear-gradient(90deg, rgba(154, 167, 189, .07) 1px, transparent 1px) 50% 0 / 48px 48px;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%);
	mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%);
}
.cr-cta > * { position: relative; z-index: 1; }
/* La onda de puntos del fondo se deja ver alrededor del texto, no debajo de él. */
.cr-cta > .cr-escena {
	position: absolute; inset: 0; z-index: 0; opacity: .8; mix-blend-mode: screen;
	-webkit-mask-image: radial-gradient(ellipse 60% 76% at 50% 50%, transparent 34%, #000 92%);
	mask-image: radial-gradient(ellipse 60% 76% at 50% 50%, transparent 34%, #000 92%);
}
.cr-cta h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); }
.cr-cta p { max-width: 580px; margin: 16px auto 0 !important; color: var(--apagado); }
.cr-cta .wp-block-buttons { justify-content: center; margin-top: 32px !important; }
.cr-cta--entrada { margin-top: 64px; padding: 40px 26px; }
.cr-cta--entrada h2 { font-size: 1.5rem; }
.cr-cta--entrada p + p { margin-top: 26px !important; }

/* ---------- portada de página interior ---------- */

.cr-portada {
	position: relative; isolation: isolate; overflow: hidden;
	padding: calc(var(--barra) + clamp(48px, 9vw, 104px)) 0 clamp(48px, 8vw, 88px);
}
.cr-portada::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(55% 80% at 90% 0%, rgba(30, 122, 76, .30), transparent 70%),
		radial-gradient(45% 70% at 0% 100%, rgba(21, 58, 102, .40), transparent 70%);
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.cr-portada > .cr-ancho > * + * { margin-top: 22px !important; }
.cr-portada__titulo { max-width: 900px; font-size: clamp(2.1rem, 6vw, 3.7rem); letter-spacing: -.03em; line-height: 1.06; }
.cr-portada__texto { max-width: 680px; color: var(--apagado); font-size: clamp(1.04rem, 2vw, 1.18rem); }
.cr-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.cr-portada--centro { text-align: center; min-height: 72svh; display: grid; align-items: center; }
.cr-portada--centro .cr-antetitulo, .cr-portada--centro .cr-portada__botones { justify-content: center; }
.cr-portada--centro .cr-portada__titulo, .cr-portada--centro .cr-portada__texto { margin-inline: auto; }

/* Portada con animación. En móvil va en una franja debajo del texto, para no restarle lectura;
   en escritorio, a la derecha. El color de fondo hace falta para que el vídeo se funda con él. */
.cr-portada--escena { padding-bottom: calc(clamp(48px, 8vw, 88px) + 185px); background-color: var(--fondo); }
.cr-portada--escena > .cr-escena {
	position: absolute; inset: auto 0 0 0; z-index: -1; height: 240px;
	/* La caja entera se funde con el fondo: al tener posición propia, fundir solo el vídeo no bastaría. */
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%);
	mask-image: linear-gradient(to bottom, transparent, #000 34%);
}
/* Entera y sin recortar, sea cual sea el ancho de la pantalla. */
.cr-portada--escena > .cr-escena video { object-fit: contain; }
/* A la derecha solo cuando hay sitio para que no quede debajo del final del título. */
@media (min-width: 1280px) {
	.cr-portada--escena { padding-bottom: clamp(48px, 8vw, 88px); }
	.cr-portada--escena > .cr-escena {
		inset: 0 -110px 0 auto; width: min(60%, 940px); height: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
		mask-image: linear-gradient(to right, transparent, #000 40%);
	}
	.cr-portada--escena > .cr-escena video { object-position: right 56%; }
}

.cr-aviso {
	max-width: 680px; padding: 13px 16px;
	border: 1px solid var(--acento-borde); border-radius: 12px; background: var(--acento-suave);
	font-size: .9rem; color: var(--texto);
}
.cr-aviso strong { color: var(--acento); }

/* ---------- capturas ---------- */

.cr-marco {
	padding: 34px 10px 10px;
	border: 1px solid var(--borde); border-radius: var(--radio);
	background:
		radial-gradient(circle at 20px 17px, rgba(47, 213, 123, .75) 4.500px, transparent 5.500px),
		radial-gradient(circle at 36px 17px, rgba(154, 167, 189, .4) 4.500px, transparent 5.500px),
		radial-gradient(circle at 52px 17px, rgba(154, 167, 189, .4) 4.500px, transparent 5.500px),
		var(--panel);
	box-shadow: 0 34px 90px rgba(0, 0, 0, .5);
}
.cr-marco img { display: block; width: 100%; border-radius: 10px; }

/* Las capturas del taller traen mucho blanco debajo: se recortan por arriba. */
.cr-pantalla .cr-marco img { aspect-ratio: 16 / 8.4; object-fit: cover; object-position: top; background: #fff; }
.cr-pantalla { display: grid; gap: 22px; }
.cr-pantalla + .cr-pantalla { margin-top: clamp(56px, 8vw, 104px) !important; }
.cr-pantalla__texto > * + * { margin-top: 12px !important; }
.cr-pantalla__texto h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.cr-pantalla__texto p:last-child { color: var(--apagado); }
@media (min-width: 1000px) {
	.cr-pantalla { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 56px; align-items: center; }
	.cr-pantalla:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); }
	.cr-pantalla:nth-child(even) .cr-pantalla__texto { order: 2; }
}

/* ---------- equipo y testimonios ---------- */

.cr-persona {
	display: flex; flex-direction: column; gap: 10px;
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel);
}
.cr-persona__foto { width: 112px; margin-bottom: 8px; }
.cr-persona__foto img { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 50%; border: 2px solid var(--acento-borde); }
.cr-persona h3 { font-size: 1.3rem; }
.cr-persona__rol { color: var(--acento); font-size: .98rem; font-weight: 500; line-height: 1.45; }
.cr-persona p:not(.cr-persona__rol) { color: var(--apagado); }

.cr-testimonio { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: var(--radio); background: var(--panel); }
.cr-testimonio__cita { font-family: var(--titulos); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; }
.cr-testimonio__autor { margin-top: 18px !important; color: var(--apagado); font-size: .95rem; }
.cr-testimonio__autor strong { color: var(--texto); }

/* ---------- contacto ---------- */

.cr-datos { display: grid; gap: 12px; }
.cr-dato {
	display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center;
	padding: 18px 20px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel);
}
.cr-dato.cr-ico::before { grid-row: span 2; margin: 0; }
.cr-dato :is(h2, h3) { font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--apagado); }
.cr-dato p { margin-top: 3px !important; color: var(--texto) !important; font-weight: 600; overflow-wrap: anywhere; }
.cr-dato a { color: inherit; }
.cr-dato a:hover { color: var(--acento); }

.cr-form {
	display: grid; gap: 18px;
	padding: clamp(22px, 4vw, 40px);
	border: 1px solid var(--borde); border-radius: 22px; background: var(--panel);
}
.cr-form__fila { display: grid; gap: 18px; }
@media (min-width: 640px) { .cr-form__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-form label { display: block; margin-bottom: 7px; color: var(--apagado); font-size: .86rem; font-weight: 600; }
.cr-form label span { font-weight: 400; }
.cr-form input[type="text"], .cr-form input[type="email"], .cr-form input[type="tel"], .cr-form select, .cr-form textarea {
	width: 100%; min-height: 50px; padding: 13px 16px;
	border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo);
	color: var(--texto); font: inherit; font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.cr-form textarea { resize: vertical; min-height: 130px; }
.cr-form ::placeholder { color: #66748C; }
.cr-form input:focus, .cr-form select:focus, .cr-form textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cr-form__acepto label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; }
.cr-form__acepto input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acento); }
/* El enlace a la política va subrayado: dentro de una frase, el color solo no basta para verlo como enlace. */
.cr-form__acepto a { text-decoration: underline; text-underline-offset: 3px; }
.cr-form__enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cr-form__nota { color: var(--apagado); font-size: .86rem; }
.cr-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cr-form__estado:empty { display: none; }
.cr-form__estado { padding: 13px 16px; border-radius: 12px; font-size: .95rem; }
.cr-form__estado[data-estado="ok"] { background: var(--acento-suave); border: 1px solid var(--acento-borde); }
.cr-form__estado[data-estado="error"] { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .4); }
.cr-form.es-enviando button { opacity: .6; pointer-events: none; }

/* ---------- páginas de texto y entradas ---------- */

.cr-texto { padding: calc(var(--barra) + clamp(44px, 8vw, 88px)) 0 var(--seccion); }
.cr-texto h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); letter-spacing: -.03em; margin-top: 14px; }
.cr-texto__fecha { margin-top: 14px; color: var(--apagado); font-size: .9rem; }
.cr-texto__imagen { margin-top: 34px; }
.cr-texto__imagen img { display: block; width: 100%; border-radius: var(--radio); }

.cr-prosa { margin-top: 40px; }
.cr-prosa > * + * { margin-top: 1.25em; }
.cr-prosa p, .cr-prosa li { color: #C5CEDD; }
.cr-prosa h2 { margin-top: 2em; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.cr-prosa h3 { margin-top: 1.7em; font-size: 1.2rem; }
.cr-prosa ul, .cr-prosa ol { padding-left: 1.2em; }
.cr-prosa li + li { margin-top: .6em; }
.cr-prosa strong { color: var(--texto); }
.cr-prosa a { text-decoration: underline; text-underline-offset: 3px; }
.cr-prosa img { border-radius: var(--radio); }
.cr-prosa blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 3px solid var(--acento); font-family: var(--titulos); font-size: 1.2rem; color: var(--texto); }
.cr-prosa .wp-block-table { overflow-x: auto; }
.cr-prosa table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .94rem; }
.cr-prosa th, .cr-prosa td { padding: 12px 14px; border: 1px solid var(--borde); text-align: left; vertical-align: top; color: #C5CEDD; }
.cr-prosa th { color: var(--texto); background: var(--panel); }

.cr-paginacion { margin-top: 56px; }
.cr-paginacion .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cr-paginacion .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto); font-size: .92rem; }
.cr-paginacion .page-numbers.current, .cr-paginacion a.page-numbers:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- pie ---------- */

.cr-pie { border-top: 1px solid var(--borde); background: var(--fondo-suave); padding-top: clamp(48px, 7vw, 80px); }
.cr-pie__rejilla { display: grid; gap: 36px; }
.cr-pie__marca p { margin-top: 12px; max-width: 320px; color: var(--apagado); font-size: .95rem; }
.cr-pie__marca .cr-pie__zona { font-size: .86rem; }
.cr-pie__col h2 { font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.cr-pie ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.cr-pie li { color: var(--apagado); font-size: .95rem; }
.cr-pie li a { display: inline-block; padding: 5px 0; color: var(--texto); }
.cr-pie li a:hover { color: var(--acento); text-decoration: none; }
.cr-pie__legal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
	margin-top: clamp(36px, 6vw, 64px); padding-block: 22px 96px;
	border-top: 1px solid var(--borde); color: var(--apagado); font-size: .86rem;
}
.cr-pie__legal ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.cr-pie__legal li a { color: var(--apagado); font-size: .86rem; }
@media (min-width: 700px) {
	.cr-pie__rejilla { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 40px; }
	.cr-pie__legal { padding-bottom: 28px; }
}

.cr-whatsapp {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
	background: var(--acento); color: var(--tinta);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	transition: transform .25s var(--suave);
}
.cr-whatsapp:hover { transform: translateY(-3px) scale(1.04); }
@media (min-width: 1000px) { .cr-whatsapp { right: 28px; bottom: 28px; } }

/* ---------- aparición al hacer scroll (solo con JavaScript) ---------- */

/* Solo fundido y subida. Con desenfoque añadido la página bajaba a tirones en ordenadores con
   gráfica integrada (medido: de 15–46 a 61 fotogramas por segundo al quitarlo). */
.cr-js .cr-aparece { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.cr-js .cr-aparece.es-visible { opacity: 1; transform: none; }
.cr-js .cr-escalera > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--suave), transform .7s var(--suave), box-shadow .35s; }
.cr-js .cr-escalera.es-visible > * { opacity: 1; transform: none; }
.cr-js .cr-escalera.es-visible > :nth-child(2) { transition-delay: .09s; }
.cr-js .cr-escalera.es-visible > :nth-child(3) { transition-delay: .18s; }
.cr-js .cr-escalera.es-visible > :nth-child(4) { transition-delay: .27s; }
.cr-js .cr-escalera.es-visible > :nth-child(5) { transition-delay: .36s; }
.cr-js .cr-escalera.es-visible > :nth-child(6) { transition-delay: .45s; }
.cr-js .cr-escalera.es-lista > * { transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.cr-js .cr-aparece, .cr-js .cr-escalera > * { opacity: 1; transform: none; }
	.cr-js .cr-historia__paso { opacity: 1; }
}