/* Tema CloudNetwork — componentes. Colores y tipografías: theme.json. */

:root {
	--cn-radius: 1rem;
	--cn-shadow: 0 10px 30px -12px rgb(11 37 69 / 0.25);
	--cn-navy: var(--wp--preset--color--navy);
	--cn-brand: var(--wp--preset--color--brand);
	--cn-action: var(--wp--preset--color--action);
	--cn-accent: var(--wp--preset--color--accent);
	--cn-ice: var(--wp--preset--color--ice);
	--cn-line: var(--wp--preset--color--line);
	--cn-muted: var(--wp--preset--color--muted);
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
:focus-visible { outline: 3px solid var(--cn-brand); outline-offset: 2px; }
h1, h2, h3, h4 { text-wrap: balance; }
.cn-main { padding: 0 !important; }
.cn-main > .wp-block-post-content > * { margin-block-start: 0; }

/* ------------------------------------------------------------ iconos */
.cn-has-icon::before,
[class*="cn-icon--"].cn-contact-item::before,
.cn-quote::before,
.cn-mobilebar a::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: var(--cn-icon) center / contain no-repeat;
	mask: var(--cn-icon) center / contain no-repeat;
}
.cn-has-icon::before {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--brand-50);
	-webkit-mask: none;
	mask: none;
	background-image: none;
	position: relative;
}
/* El icono se dibuja como máscara sobre un cuadro azul claro. */
.cn-has-icon { position: relative; }
.cn-has-icon::after {
	content: "";
	position: absolute;
	top: calc(1.5rem + 0.6rem);
	left: calc(1.5rem + 0.6rem);
	width: 1.55rem;
	height: 1.55rem;
	background: var(--cn-action);
	-webkit-mask: var(--cn-icon) center / contain no-repeat;
	mask: var(--cn-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------ encabezado */
.cn-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .cn-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cn-site-header { top: 0; } }

.cn-utility {
	background: var(--cn-navy);
	color: #fff;
	font-size: 0.875rem;
	padding-block: 0.35rem;
}
.cn-utility p { margin: 0; }
.cn-utility a { color: rgb(255 255 255 / 0.9); text-decoration: none; }
.cn-utility a:hover { color: var(--cn-brand); }
.cn-switch { display: inline-flex; gap: 0.15rem; padding: 0.15rem; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.cn-switch a { padding: 0.25rem 0.8rem; border-radius: 999px; font-weight: 600; }
.cn-switch a.is-active { background: #fff; color: var(--cn-navy); }
.cn-utility-links { display: flex; gap: 1.25rem; align-items: center; }
.cn-utility-links .cn-phone { font-weight: 700; color: #fff; }
@media (max-width: 900px) { .cn-utility-links a:not(.cn-phone) { display: none; } }

.cn-mainbar {
	background: rgb(255 255 255 / 0.96);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--cn-line);
	padding-block: 0.65rem;
}
.cn-mainbar .wp-block-site-logo img { height: 44px; width: auto; }
.cn-nav { font-weight: 500; }
.cn-nav .wp-block-navigation-item__content { color: var(--cn-navy); padding: 0.5rem 0.9rem; border-radius: 999px; }
.cn-nav .wp-block-navigation-item__content:hover { background: var(--cn-ice); text-decoration: none; }
.cn-nav .current-menu-item > .wp-block-navigation-item__content,
.cn-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--cn-action); }
.cn-header-cta .wp-block-button__link { padding: 0.6rem 1.25rem; white-space: nowrap; }
@media (max-width: 600px) { .cn-header-cta { display: none !important; } }

/* Mega-menú: el submenú de Servicios TI se muestra en columnas. */
@media (min-width: 1000px) {
	.cn-nav .cn-mega > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(15rem, 1fr));
		gap: 0.25rem;
		min-width: min(56rem, 90vw) !important;
		left: 50% !important;
		transform: translateX(-50%);
		padding: 1rem;
		border: 1px solid var(--cn-line) !important;
		border-radius: var(--cn-radius);
		box-shadow: var(--cn-shadow);
	}
	.cn-nav .cn-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 0.95rem;
		padding: 0.65rem 0.8rem;
		border-radius: 0.75rem;
		font-weight: 600;
		white-space: normal;
	}
	.cn-nav .cn-mega .wp-block-navigation-item__description {
		display: block;
		margin-top: 0.15rem;
		font-size: 0.85rem;
		font-weight: 400;
		color: var(--cn-muted);
	}
}
.cn-nav .wp-block-navigation__submenu-container { border-radius: 0.75rem; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description { display: none; }

/* ------------------------------------------------------------ secciones */
.cn-section { padding-block: var(--wp--preset--spacing--60); }
.cn-section__inner > h2 { margin-bottom: 0; max-width: 48rem; }
.cn-section__inner > .cn-lead { max-width: 48rem; margin-top: 0.75rem; margin-bottom: 2.5rem; }
.cn-section__inner > h2 + :not(.cn-lead) { margin-top: 2.5rem; }
.cn-tone-ice { background: var(--cn-ice); }
.cn-tone-navy { background: var(--cn-navy); color: #fff; }
.cn-lead { font-size: var(--wp--preset--font-size--large); color: var(--cn-muted); }
.cn-muted { color: var(--cn-muted); }
.cn-strong { font-weight: 600; color: var(--cn-navy); }
.cn-note { font-size: 0.9rem; color: var(--cn-muted); }
.cn-center { text-align: center; }
.cn-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-muted); }
.cn-subhead { margin-top: 3.5rem !important; }
.cn-grid + .cn-grid { margin-top: 2.5rem; }
.cn-split { align-items: center; }
.cn-narrow { max-width: 48rem; }

/* Tarjetas */
.is-style-card {
	background: #fff;
	border: 1px solid var(--cn-line);
	border-radius: var(--cn-radius);
	padding: 1.5rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.is-style-card > :first-child { margin-top: 0; }
.is-style-card h3 { margin-top: 0; font-size: 1.25rem; line-height: 1.25; }
.is-style-card > * + * { margin-top: 0.6rem; }
.is-style-card:has(.cn-card-link):hover { box-shadow: var(--cn-shadow); transform: translateY(-2px); }
.cn-tone-ice .is-style-card { background: #fff; }
.cn-tone-card-ice { background: var(--cn-ice); }
.cn-card-link a { font-weight: 600; text-decoration: none; }
.cn-card-link a:hover { text-decoration: underline; }
.cn-card-link { margin-top: auto !important; padding-top: 0.75rem; }
.cn-grid > .is-style-card { display: flex; flex-direction: column; }

.cn-problem { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--cn-ice); }
.cn-problem::before { display: none; }
.cn-problem::after { position: static; flex: none; background: var(--cn-accent); width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
.cn-problem p { margin: 0; }

.cn-step__number { font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--cn-brand); font-size: 0.9rem; }

/* Cifras */
.cn-stats { margin-bottom: 2.5rem; }
.cn-stat { background: var(--cn-ice); border-radius: var(--cn-radius); padding: 1.5rem; text-align: center; }
.cn-tone-ice .cn-stat { background: #fff; }
.cn-stat p { margin: 0; }
.cn-stat__value { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.75rem; line-height: 1.1; color: var(--cn-action); }
.cn-stat__label { color: var(--cn-muted); }

/* Chips */
.cn-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-chips li { margin: 0; padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--cn-ice); border: 1px solid var(--cn-line); font-size: 0.9rem; font-weight: 600; color: var(--cn-navy); }
.cn-tone-ice .cn-chips li { background: #fff; }
.cn-chips--places li { background: var(--wp--preset--color--brand-50); border-color: transparent; font-size: 1rem; padding: 0.6rem 1.2rem; }

/* Lista con marcas */
.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 1.9rem; margin-block: 0.6rem; }
.is-style-checks li::before {
	content: "";
	position: absolute; left: 0; top: 0.3rem;
	width: 1.2rem; height: 1.2rem;
	background: var(--wp--preset--color--success);
	-webkit-mask: var(--cn-check) center / contain no-repeat;
	mask: var(--cn-check) center / contain no-repeat;
}

/* Frase destacada */
.cn-quote { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 48rem; margin-inline: auto; }
.cn-quote::before { width: 2.5rem; height: 2.5rem; color: var(--cn-brand); }
.cn-quote__text { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.2; color: var(--cn-navy); }
.cn-grid + .cn-quote { margin-top: 3.5rem; }

/* Preguntas frecuentes: pregunta (H3) y respuesta directa, siempre visibles */
.cn-qa { row-gap: 2rem; }
.cn-qa__item { border-top: 2px solid var(--wp--preset--color--brand-50); padding-top: 1.25rem; }
.cn-qa__item h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; color: var(--cn-navy); }
.cn-qa__item p { margin: 0.6rem 0 0; }
.cn-updated { margin-top: 2.5rem !important; font-size: 0.85rem; color: var(--cn-muted); }

/* Respuesta directa debajo del hero */
.cn-answer { max-width: 52rem; border-left: 4px solid var(--cn-action); padding-left: 1.75rem; }
.cn-answer h2 { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.cn-answer .cn-lead { margin: 0.75rem 0 0; color: var(--wp--preset--color--ink, var(--cn-navy)); }

/* Planes */
.cn-plan { border-width: 2px; padding: 2rem; }
.cn-plan.is-popular { border-color: var(--cn-action); box-shadow: var(--cn-shadow); position: relative; }
.cn-badge { position: absolute; top: -0.85rem; left: 2rem; margin: 0 !important; background: var(--cn-action); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.75rem; border-radius: 999px; }
.cn-plan .wp-block-buttons { margin-top: auto !important; padding-top: 1.5rem; }
.cn-plan .wp-block-button, .cn-plan .wp-block-button__link { width: 100%; }

/* Línea de tiempo */
.cn-timeline { border-left: 2px solid var(--wp--preset--color--brand-50); padding-left: 2rem; display: grid; gap: 2.5rem; }
.cn-timeline__item { position: relative; }
.cn-timeline__item::before { content: ""; position: absolute; left: calc(-2rem - 9px); top: 0.3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--cn-brand); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--cn-brand); }
.cn-timeline__year { font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--cn-action); margin: 0; letter-spacing: 0.08em; }
.cn-timeline__item h2 { margin-top: 0.25rem; font-size: var(--wp--preset--font-size--x-large); }

/* ------------------------------------------------------------ hero */
.cn-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem); background-size: cover; background-position: 70% 50%; }
.cn-hero.is-large { padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.cn-hero.is-light { background-color: var(--wp--preset--color--brand-50); background-image: linear-gradient(to bottom, var(--wp--preset--color--brand-50), #fff); }
.cn-hero.is-dark { background-color: var(--cn-navy); color: #fff; }
.cn-hero > * { position: relative; z-index: 1; }
.cn-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.cn-hero.is-dark.has-image::before { background: linear-gradient(90deg, var(--cn-navy) 0%, rgb(11 37 69 / 0.85) 45%, rgb(11 37 69 / 0) 100%); }
.cn-hero.is-light.has-image::before { background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0.8) 45%, rgb(255 255 255 / 0) 100%); }
@media (max-width: 781px) {
	.cn-hero.is-dark.has-image::before { background: rgb(11 37 69 / 0.8); }
	.cn-hero.is-light.has-image::before { background: rgb(255 255 255 / 0.85); }
}
.cn-hero:not(.has-image)::after {
	content: "";
	position: absolute; inset: 0 0 0 auto; width: 60%; z-index: 0; opacity: 0.25;
	background: url("../images/network-lines.svg") right center / cover no-repeat;
	pointer-events: none;
}
.cn-hero__content { max-width: 42rem; animation: cn-fade-up 0.35s ease-out both; }
.cn-hero h1 { margin: 0; }
.cn-hero.is-dark h1 { color: #fff; }
.cn-hero__lead { font-size: var(--wp--preset--font-size--large); margin-top: 1.25rem; color: var(--cn-muted); }
.cn-hero.is-dark .cn-hero__lead { color: rgb(255 255 255 / 0.85); }
.cn-hero .wp-block-buttons { margin-top: 2rem; }
.cn-trust { list-style: none; padding: 0; margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.9rem; color: rgb(255 255 255 / 0.85); }
.cn-trust li { position: relative; padding-left: 1.5rem; }
.cn-trust li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1rem; height: 1rem; background: var(--cn-brand); -webkit-mask: var(--cn-check) center / contain no-repeat; mask: var(--cn-check) center / contain no-repeat; }
.cn-overlap { padding-top: 0; margin-top: -2.5rem !important; position: relative; z-index: 2; }

@keyframes cn-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ botones */
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 2px; padding: calc(0.8rem - 2px) calc(1.6rem - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--cn-action); color: #fff; border-color: var(--cn-action); }
.wp-block-button.cn-btn-light > .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / 0.7); }
.wp-block-button.cn-btn-light > .wp-block-button__link:hover { background: #fff; color: var(--cn-navy); border-color: #fff; }
.wp-block-button__link { transition: background-color 0.2s, color 0.2s; }

/* ------------------------------------------------------------ CTA final */
.cn-cta { background: var(--cn-navy); color: #fff; text-align: center; padding-block: var(--wp--preset--spacing--60); position: relative; overflow: hidden; }
.cn-cta::after { content: ""; position: absolute; inset: 0; opacity: 0.2; background: url("../images/network-lines.svg") right center / auto 120% no-repeat; pointer-events: none; }
.cn-cta__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.cn-cta h2 { color: #fff; }
.cn-cta .cn-lead { color: rgb(255 255 255 / 0.8); }
.cn-cta .wp-block-buttons { justify-content: center; margin-top: 2rem; }

/* ------------------------------------------------------------ contacto */
.cn-contact-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .cn-contact-layout { grid-template-columns: minmax(0, 1fr); } }
.cn-form-card { padding: clamp(1.25rem, 4vw, 2.5rem); }
.cn-contact-aside { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cn-contact-layout > * { min-width: 0; }
.cn-contact-card, .cn-contact-aside p { overflow-wrap: anywhere; }
.cn-contact-card { background: var(--cn-navy); color: #fff; border-radius: var(--cn-radius); padding: 2rem; display: grid; gap: 1.1rem; }
.cn-contact-card a { color: #fff; font-weight: 600; text-decoration: none; }
.cn-contact-card a:hover { color: var(--cn-brand); }
/* El ícono va fijo a la izquierda y el texto fluye normal (no como columnas de flex),
   para que "Oficina: …" y "Soporte: …" se lean en línea. */
.cn-contact-item { position: relative; display: block; margin: 0; padding-left: 2rem; line-height: 1.5; }
.cn-contact-item::before { position: absolute; left: 0; top: 0.15rem; width: 1.25rem !important; height: 1.25rem !important; color: var(--cn-brand); background: var(--cn-brand) !important; }
.cn-contact-item strong { color: #fff; }

/* ------------------------------------------------------------ legal y 404 */
.cn-legal .cn-section__inner { max-width: 48rem; margin-inline: auto !important; }
.cn-legal h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.cn-legal p, .cn-legal li { color: var(--cn-muted); }
.cn-404 { text-align: center; padding-block: 6rem; }
.cn-404 .wp-block-buttons { justify-content: center; }
.cn-404__code { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 4rem; color: var(--cn-brand); margin: 0; }

/* ------------------------------------------------------------ pie */
.cn-footer { background: var(--cn-navy); color: rgb(255 255 255 / 0.8); font-size: 0.925rem; padding-top: 3.5rem; }
.cn-footer a { color: rgb(255 255 255 / 0.8); text-decoration: none; }
.cn-footer a:hover { color: var(--cn-brand); }
.cn-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr repeat(4, 1fr); padding-bottom: 3rem; }
@media (max-width: 900px) { .cn-footer__grid { grid-template-columns: 1fr 1fr; } .cn-footer__grid > :first-child { grid-column: 1 / -1; } }
.cn-footer__brand { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.5rem; color: #fff; margin: 0; }
.cn-footer__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: #fff; }
.cn-footer__links { list-style: none; padding: 0; }
.cn-footer__links li { margin-block: 0.55rem; }
.cn-footer__hours strong { color: #fff; }
.cn-footer__bottom { border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.8rem; color: rgb(255 255 255 / 0.6); padding-block: 1rem; }
.cn-footer__bottom p { margin: 0; }

/* Barra fija en móvil: Llamar · WhatsApp · Cotizar */
.cn-mobilebar { display: none; }
@media (max-width: 781px) {
	.cn-mobilebar {
		display: flex;
		position: fixed; inset: auto 0 0 0; z-index: 40;
		margin: 0;
		background: #fff;
		border-top: 1px solid var(--cn-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.cn-mobilebar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.6rem 0; font-size: 0.75rem; font-weight: 600; color: var(--cn-navy); text-decoration: none; }
	.cn-mobilebar a::before { width: 1.25rem; height: 1.25rem; color: var(--cn-action); background: var(--cn-action); }
	.cn-mobilebar a.is-primary { background: var(--cn-accent); }
	.cn-mobilebar a.is-primary::before { background: var(--cn-navy); }
	.cn-footer { padding-bottom: 4.5rem; }
}

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

/* ============================================================ efectos */

/* Video del hero: va debajo del degradado y aparece suave cuando empieza a reproducir. */
.cn-hero.has-video::before { z-index: 1; }
.cn-hero.has-video > * { z-index: 2; }
/* El hero usa el layout "constrained" de WordPress, que limita cada hijo al ancho del texto
   (760 px). El video debe ignorar ese límite y cubrir toda la sección. */
.cn-hero > .cn-hero__video {
	position: absolute; inset: 0; z-index: 0 !important;
	width: 100%; height: 100%; max-width: none !important; margin: 0 !important;
	object-fit: cover; object-position: 70% 50%;
	opacity: 0; transition: opacity 0.8s ease;
	pointer-events: none;
}
.cn-hero.is-video-playing > .cn-hero__video { opacity: 1; }
@media (max-width: 767px) { .cn-hero > .cn-hero__video { object-position: 50% 50%; } }

/* Recorrido con scroll. Sin JavaScript (o con "reducir movimiento") se ve como una sección
   normal con la imagen final de fondo; con JavaScript queda fija y avanza con el scroll. */
.cn-scrolly {
	position: relative;
	background: var(--cn-navy) center / cover no-repeat;
	color: #fff;
}
.cn-seq--recorrido { background-image: linear-gradient(rgb(11 37 69 / 0.75), rgb(11 37 69 / 0.75)), url("../sequence/recorrido/desk/final.webp"); }
@media (max-width: 767px) {
	.cn-seq--recorrido { background-image: linear-gradient(rgb(11 37 69 / 0.75), rgb(11 37 69 / 0.75)), url("../sequence/recorrido/movil/final.webp"); }
}
.cn-scrolly__sticky { position: relative; padding: var(--wp--preset--spacing--60) 1.25rem; max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.cn-scrolly__head h2, .cn-scrolly h3 { color: #fff; }
.cn-scrolly .cn-lead { color: rgb(255 255 255 / 0.8); }
.cn-scrolly__steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 2.5rem; }
.cn-scrolly__step { padding: 1.25rem; border-radius: var(--cn-radius); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); }
.cn-scrolly__step p { margin: 0.4rem 0 0; color: rgb(255 255 255 / 0.85); }
.cn-scrolly__step h3 { margin-top: 0.25rem; font-size: 1.25rem; }
.cn-scrolly .cn-scrolly__eyebrow { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cn-brand); }

.cn-scrolly.is-enhanced { background: #050d1a; height: calc(var(--cn-steps, 5) * 85vh + 100vh); }
.cn-scrolly.is-enhanced .cn-scrolly__sticky {
	position: sticky; top: 0; height: 100vh; height: 100dvh; max-width: none; padding: 0; overflow: hidden;
}
.cn-scrolly__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cn-scrolly.is-enhanced .cn-scrolly__sticky::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(5 13 26 / 0.85) 0%, rgb(5 13 26 / 0.45) 40%, rgb(5 13 26 / 0) 70%),
		linear-gradient(0deg, rgb(5 13 26 / 0.7) 0%, rgb(5 13 26 / 0) 35%);
}
.cn-scrolly.is-enhanced .cn-scrolly__head,
.cn-scrolly.is-enhanced .cn-scrolly__steps { position: absolute; z-index: 1; left: max(1.25rem, calc((100vw - var(--wp--style--global--wide-size)) / 2)); width: min(32rem, calc(100% - 2.5rem)); }
/* Debajo del encabezado fijo del sitio (barra superior + menú). */
.cn-scrolly.is-enhanced .cn-scrolly__head { top: clamp(9rem, 20vh, 12rem); }
.cn-scrolly.is-enhanced .cn-scrolly__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.cn-scrolly.is-enhanced .cn-scrolly__steps { display: block; bottom: clamp(3rem, 12vh, 7rem); margin: 0; min-height: 12rem; }
.cn-scrolly.is-enhanced .cn-scrolly__step {
	position: absolute; inset: auto 0 0 0;
	opacity: 0; transform: translateY(24px); transition: opacity 0.45s ease, transform 0.45s ease;
	background: rgb(5 13 26 / 0.55);
}
.cn-scrolly.is-enhanced .cn-scrolly__step.is-active { opacity: 1; transform: none; }
.cn-scrolly.is-enhanced .cn-scrolly__step h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
/* Barra de progreso del recorrido */
.cn-scrolly.is-enhanced .cn-scrolly__sticky::before {
	content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px;
	width: calc(var(--cn-progress, 0) * 100%); background: var(--cn-brand); box-shadow: 0 0 12px var(--cn-brand);
}
@media (max-width: 781px) {
	.cn-scrolly.is-enhanced .cn-scrolly__sticky::after { background: linear-gradient(0deg, rgb(5 13 26 / 0.9) 0%, rgb(5 13 26 / 0.2) 55%, rgb(5 13 26 / 0.6) 100%); }
	.cn-scrolly.is-enhanced .cn-scrolly__head { top: 8rem; }
	.cn-scrolly.is-enhanced .cn-scrolly__head .cn-lead { display: none; }
	.cn-scrolly.is-enhanced .cn-scrolly__steps { bottom: 5.5rem; }
}

/* Modelo 3D */
.cn-model { position: relative; aspect-ratio: 1 / 1; max-width: 34rem; width: 100%; margin-inline: auto; }
.cn-model::before {
	content: ""; position: absolute; inset: 12%; border-radius: 50%; z-index: 0;
	background: radial-gradient(circle, rgb(41 171 226 / 0.28), rgb(41 171 226 / 0) 70%);
	filter: blur(10px);
}
.cn-model .wp-block-image { position: relative; z-index: 1; margin: 0; height: 100%; transition: opacity 0.5s ease; }
.cn-model .wp-block-image img { width: 100%; height: 100%; object-fit: contain; animation: cn-float 6s ease-in-out infinite; }
.cn-model__viewer { position: absolute !important; inset: 0; z-index: 2; width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.cn-model.is-3d-ready .wp-block-image { opacity: 0; }
@keyframes cn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Aparición al hacer scroll */
.cn-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease var(--cn-delay, 0ms), transform 0.6s ease var(--cn-delay, 0ms); }
.cn-reveal.is-visible { opacity: 1; transform: none; }