/**
 * Culture Racing — Home Styles
 *
 * Diseño visual completo de la página Home. Todo estilo vive aquí —
 * Elementor solo configura estructura + IDs/clases siguiendo el documento
 * "Culture Racing — Diseño Home v1.0".
 *
 * Estructura del DOM esperada (IDs de sección):
 *   #cr-home-hero · #cr-home-expo · #cr-home-services · #cr-home-manifesto
 *   #cr-home-shop · #cr-home-portfolio · #cr-home-team · #cr-home-community
 *   #cr-home-cta · #cr-home-brands · #cr-home-trust · #cr-home-benefits
 *   #cr-home-testimonials · #cr-home-faq
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Layout base        → [id^="cr-home-"] + .cr-home-content-wrap
 *   §2  Hero               → #cr-home-hero + eyebrow / título / subtítulo / CTAs
 *   §3  Hero aside (Expo)   → widget zenth_hero_aside + .zenth-hero-aside
 *   §4  Hero stats band     → .cr-hero-stats / .cr-hero-stat
 *   §5  Hero animaciones    → estados de entrada + keyframes + micro-hover
 *   §6  Botones             → .cr-btn-primary / -secondary / -light / -outline
 *   §7  Expo Hook           → #cr-home-expo
 *   §8  Services grid        → #cr-home-services + .cr-service-card
 *   §9  Manifiesto          → #cr-home-manifesto
 *   §10 Shop strip          → #cr-home-shop
 *   §11 Portafolio          → #cr-home-portfolio
 *   §12 Team CR             → #cr-home-team
 *   §13 Comunidad           → #cr-home-community
 *   §14 CTA final           → #cr-home-cta
 *   §15 Marcas + carousel    → #cr-home-brands + .zenth-logo-carousel
 *   §16 Trust bar           → #cr-home-trust
 *   §17 Benefits            → #cr-home-benefits
 *   §18 Testimonios         → #cr-home-testimonials
 *   §19 FAQ                 → #cr-home-faq
 *   §20 WhatsApp float       → .cr-whatsapp-float
 *   §21 Responsive          → TODOS los @media de tamaño + a11y al final
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS reales del archivo (desktop es la base, sin media query):
 *   1024 tablet · 640 mobile
 *   Hay 3 @media de tamaño a 1024, 2 a 640 → consolidados en §21 por tier.
 *   + Accesibilidad: prefers-reduced-motion (3 bloques: hero / carousel /
 *   secciones-cards). NO se consolidan con los de tamaño; van en su propia
 *   subsección al final de §21, en su orden original.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · LAYOUT BASE
   ═══════════════════════════════════════════════════════════════════════ */

/* Las secciones de la home toman ancho completo pero el contenido
   interior usa el container max del proyecto */
[id^="cr-home-"] {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Helper universal: limitar ancho de contenido dentro de secciones full-width */
.cr-home-content-wrap {
	max-width: var(--cr-container-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--cr-container-pad, 32px);
	box-sizing: border-box;
	width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HERO — #cr-home-hero
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-hero {
	position: relative;
	min-height: 92vh; /* Menor que 100vh para evitar scroll innecesario */
	display: flex !important;
	flex-direction: column;
	align-items: flex-start !important;
	justify-content: center;
	text-align: left !important;
	padding: 100px var(--cr-container-pad) 140px !important;
	background-color: var(--cr-color-black);
	/* Imagen de fondo del hero — URL absoluta de WP Media */
	background-image: url('https://cultureracing.co/wp-content/uploads/2026/04/cr-hero-home-moto-bogota.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: var(--cr-color-white);
	overflow: hidden;
}

/* Overlay gradient horizontal (izquierda oscura → derecha casi transparente).
   El contenido del hero se lee sobre el lado oscuro izquierdo. */
#cr-home-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.85) 0%,
		rgba(0, 0, 0, 0.6) 35%,
		rgba(0, 0, 0, 0.3) 65%,
		rgba(0, 0, 0, 0.15) 100%
	);
	z-index: 1;
	pointer-events: none;
}

#cr-home-hero > * {
	position: relative;
	z-index: 2;
	max-width: 100%;
}

.cr-hero-eyebrow,
.cr-hero-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
}


.cr-hero-title,
.cr-hero-title .elementor-heading-title,
.cr-hero-title .elementor-widget-container {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-display) !important; /* Super Brigade */
	font-size: clamp(38px, 5.2vw, 68px) !important;
	font-weight: 400 !important; /* Super Brigade sin más pesos */
	line-height: 1.05 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	max-width: 620px !important;
	width: auto !important;
	text-align: left !important;
}

/* .cr-hero-title__outline: estilos en sections.css como alias de
   .cr-section-title__outline (selector list). */


.cr-hero-subtitle,
.cr-hero-subtitle p,
.cr-hero-subtitle .elementor-widget-container {
	color: rgba(255, 255, 255, 0.92) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(14px, 1.1vw, 17px) !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	max-width: 440px !important;
	margin: 0 0 40px 0 !important;
	text-align: left !important;
}


.cr-hero-ctas {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 16px !important;
	align-items: center !important;
	justify-content: flex-start !important;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · HERO ASIDE (Expo CR) — widget zenth_hero_aside
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper del widget Elementor — se posiciona contra #cr-home-hero */
#cr-home-hero > .elementor-widget-zenth_hero_aside,
#cr-home-hero .elementor-widget.elementor-widget-zenth_hero_aside {
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	left: auto !important;
	z-index: 5;
	width: auto !important;
	transform: translateY(-50%);
	margin: 0 !important;
	padding: 0 !important;
}

/* El div.elementor-widget-container interno también debe ser transparente
   al posicionamiento. */
#cr-home-hero .elementor-widget-zenth_hero_aside .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Ahora el <a> se renderiza en posición estática dentro del wrapper ya
   posicionado, sin necesidad de absolute propio. */
.zenth-hero-aside {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 28px 16px;
	background: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	text-decoration: none !important;
	border-radius: 0 10px 10px 0;
	font-family: var(--cr-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	white-space: nowrap;
	/* Rotación del texto para leer de abajo hacia arriba (vertical) */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transform-origin: center center;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
	transition: padding-right var(--cr-transition-fast),
				background var(--cr-transition-fast);
	cursor: pointer;
	overflow: hidden;
}

/* Textura concrete sobre el aside rojo. Como el aside está rotado 180deg,
   la textura hereda esa rotación — pero como es tileable y uniforme, no
   afecta la percepción visual. */
.zenth-hero-aside::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cr-texture-url, url('../img/texture-concrete.webp'));
	background-size: var(--cr-texture-size-small, 180px 180px);
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

/* Spans de texto y separador encima de la textura */
.zenth-hero-aside > * {
	position: relative;
	z-index: 1;
}

/* Si el widget se renderizó como <div> (sin link) quitar cursor */
div.zenth-hero-aside {
	cursor: default;
}

.zenth-hero-aside:hover {
	padding-right: 20px;
	background: var(--cr-color-primary-hover) !important;
	color: var(--cr-color-white) !important;
}

div.zenth-hero-aside:hover {
	padding-right: 16px;
	background: var(--cr-color-primary) !important;
}

.zenth-hero-aside__text {
	display: inline-block;
}

.zenth-hero-aside__separator {
	display: inline-block;
	opacity: 0.55;
	font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · HERO STATS BAND — .cr-hero-stats
   ═══════════════════════════════════════════════════════════════════════ */

.cr-hero-stats {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	left: auto !important;
	z-index: 3;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 0 !important;
	width: auto !important;
	min-width: 520px;
	max-width: 680px;
	padding: 28px 48px !important;
	background-color: var(--cr-color-primary) !important;
	background: var(--cr-color-primary) !important;
	border-radius: 48px 0 0 0 !important;
	box-shadow: -8px -8px 32px rgba(0, 0, 0, 0.2);
	margin: 0 !important;
	/* overflow hidden necesario para que la textura respete el border-radius */
	overflow: hidden;
}

/* Textura de concreto/grunge sobre el fondo rojo.
   Se aplica via ::before con mix-blend-mode: multiply para integrarse
   al color primario manteniendo la marca racing.
   Asset: 3.1 KB WebP tileable 256x256.
   Performance: paint <0.5ms, se cachea en navegador. */
.cr-hero-stats::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/texture-concrete.webp');
	background-size: 256px 256px;
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
	/* Hereda el border-radius del padre respetando la curva */
	border-radius: inherit;
}

/* Los stats deben quedar encima de la textura */
.cr-hero-stat {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	padding: 0 16px !important;
	text-align: center !important;
	color: var(--cr-color-white) !important;
	background: transparent !important;
	margin: 0 !important;
	position: relative;
	z-index: 1;
}

/* Separador vertical entre stats (del 2º en adelante) */
.cr-hero-stat + .cr-hero-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Valor del stat (11.4K, +500, 3+) */
.cr-hero-stat__value,
.cr-hero-stat__value .elementor-heading-title,
.cr-hero-stat__value h1,
.cr-hero-stat__value h2,
.cr-hero-stat__value h3,
.cr-hero-stat__value h4,
.cr-hero-stat__value p {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(26px, 2.6vw, 40px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.5px !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Label del stat (SEGUIDORES, TRABAJOS, AÑOS) */
.cr-hero-stat__label,
.cr-hero-stat__label p,
.cr-hero-stat__label .elementor-widget-container {
	color: rgba(255, 255, 255, 0.95) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	margin: 4px 0 0 0 !important;
	text-align: center !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · HERO ANIMACIONES — estados de entrada + keyframes + micro-hover
   ═══════════════════════════════════════════════════════════════════════ */

/* Estado inicial: elementos ocultos antes de animar */
#cr-home-hero .cr-hero-title,
#cr-home-hero .cr-hero-subtitle,
#cr-home-hero .cr-hero-ctas,
#cr-home-hero .cr-hero-stats,
#cr-home-hero .elementor-widget-zenth_hero_aside {
	opacity: 0;
	will-change: transform, opacity;
}

/* Título — slide-in desde izquierda */
#cr-home-hero .cr-hero-title {
	transform: translateX(-40px);
}

/* Subtitle — fade-in up */
#cr-home-hero .cr-hero-subtitle {
	transform: translateY(20px);
}

/* CTAs — fade-in up con ligero stagger interno */
#cr-home-hero .cr-hero-ctas {
	transform: translateY(20px);
}

/* Stats band — slide-in desde derecha */
#cr-home-hero .cr-hero-stats {
	transform: translateX(60px);
}

/* Aside Expo CR — slide-in desde borde derecho */
#cr-home-hero .elementor-widget-zenth_hero_aside {
	/* El wrapper ya tiene transform: translateY(-50%) para centrarse.
	   Combinamos el translateX de entrada con el centrado vertical. */
	transform: translateY(-50%) translateX(100%);
}

#cr-home-hero.cr-hero-animated .cr-hero-title {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.8s ease-out 0.2s,
				transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

#cr-home-hero.cr-hero-animated .cr-hero-subtitle {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s ease-out 1.0s,
				transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.0s;
}

#cr-home-hero.cr-hero-animated .cr-hero-ctas {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s ease-out 1.2s,
				transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

#cr-home-hero.cr-hero-animated .cr-hero-stats {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.8s ease-out 1.4s,
				transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.4s;
}

#cr-home-hero.cr-hero-animated .elementor-widget-zenth_hero_aside {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	transition: opacity 0.8s ease-out 1.5s,
				transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}


#cr-home-hero .cr-hero-title__outline {
	opacity: 0;
	transform: scale(0.92);
	will-change: transform, opacity;
	display: inline-block; /* necesario para scale */
}

#cr-home-hero.cr-hero-animated .cr-hero-title__outline {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.7s ease-out 0.6s,
				transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}

/* La segunda palabra outline (CULTURA) se anima un pelín después */
#cr-home-hero.cr-hero-animated .cr-hero-title .cr-hero-title__outline:nth-of-type(2) {
	transition-delay: 0.85s;
}


#cr-home-hero .cr-hero-ctas > * {
	opacity: 0;
	transform: translateY(15px);
	will-change: transform, opacity;
}

#cr-home-hero.cr-hero-animated .cr-hero-ctas > *:nth-child(1) {
	animation: cr-cta-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}

#cr-home-hero.cr-hero-animated .cr-hero-ctas > *:nth-child(2) {
	animation: cr-cta-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

@keyframes cr-cta-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Imagen de fondo: Ken Burns zoom muy lento para dar vida sin marear.
   Se aplica al ::before para no afectar al gradient overlay. */
@keyframes cr-hero-bg-zoom {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.06);
	}
	100% {
		transform: scale(1);
	}
}

/* El zoom se aplica directamente al background del hero usando
   una técnica de transform en un pseudo-elemento dedicado. */
#cr-home-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
	animation: cr-hero-bg-zoom 40s ease-in-out infinite;
	/* Oculto — el bg real va en #cr-home-hero. Este solo aporta
	   el efecto zoom si decidimos activarlo. Por defecto OFF. */
	display: none;
}

/* Aside Expo CR: pulso sutil de sombra para urgencia del evento.
   Solo cuando el hero ya entró (clase cr-hero-animated activa). */
@keyframes cr-aside-pulse {
	0%, 100% {
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25),
					0 0 0 0 rgba(192, 0, 0, 0.5);
	}
	50% {
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25),
					0 0 0 12px rgba(192, 0, 0, 0);
	}
}

#cr-home-hero.cr-hero-animated .zenth-hero-aside {
	animation: cr-aside-pulse 3s ease-in-out infinite;
	animation-delay: 2.5s; /* arranca después de que entre */
}


/* Botón primario: glow que recorre sutilmente para atraer atención.
   Shimmer muy tenue — apenas perceptible, no estridente. */
#cr-home-hero .cr-btn-primary .elementor-button,
#cr-home-hero .cr-btn-primary a.elementor-button-link {
	position: relative;
	overflow: hidden;
}

#cr-home-hero .cr-btn-primary .elementor-button::after,
#cr-home-hero .cr-btn-primary a.elementor-button-link::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.18) 50%,
		transparent 100%
	);
	pointer-events: none;
}

#cr-home-hero.cr-hero-animated .cr-btn-primary .elementor-button::after,
#cr-home-hero.cr-hero-animated .cr-btn-primary a.elementor-button-link::after {
	animation: cr-btn-shimmer 4s ease-in-out infinite;
	animation-delay: 3s;
}

@keyframes cr-btn-shimmer {
	0% {
		left: -100%;
	}
	40%, 100% {
		left: 100%;
	}
}


/* Aside en hover: desliza 4px hacia izquierda (quiere salir) */
#cr-home-hero .elementor-widget-zenth_hero_aside:hover {
	transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.zenth-hero-aside {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
				background 0.3s ease,
				box-shadow 0.3s ease,
				padding-right 0.3s ease !important;
}

.zenth-hero-aside:hover {
	transform: rotate(180deg) translateY(-4px) !important;
}

/* Stats individuales: scale sutil al hover del stats band */
.cr-hero-stat {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cr-hero-stats:hover .cr-hero-stat {
	transform: scale(0.98);
}

.cr-hero-stats .cr-hero-stat:hover {
	transform: scale(1.05) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · BOTONES — primary / secondary / light / outline
   ═══════════════════════════════════════════════════════════════════════ */

/* Botón primario — fondo rojo, texto blanco */
.cr-btn-primary .elementor-button,
.cr-btn-primary a.elementor-button-link,
.cr-btn-primary > a {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 36px !important;
	background-color: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
	transition: all var(--cr-transition-fast) !important;
	cursor: pointer;
	line-height: 1;
	overflow: hidden;
}

/* Textura concrete sobre el botón primario rojo.
   Nota: se usa ::before porque ::after está reservado para el shimmer del hero. */
.cr-btn-primary .elementor-button::before,
.cr-btn-primary a.elementor-button-link::before,
.cr-btn-primary > a::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cr-texture-url, url('../img/texture-concrete.webp'));
	background-size: var(--cr-texture-size-small, 180px 180px);
	background-repeat: repeat;
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

/* Contenido del botón encima de la textura */
.cr-btn-primary .elementor-button-content-wrapper,
.cr-btn-primary .elementor-button-text {
	position: relative;
	z-index: 2;
}

.cr-btn-primary .elementor-button:hover,
.cr-btn-primary a.elementor-button-link:hover,
.cr-btn-primary > a:hover {
	background-color: var(--cr-color-primary-hover) !important;
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(192, 0, 0, 0.4);
}

/* Botón secundario — outline blanco */
.cr-btn-secondary .elementor-button,
.cr-btn-secondary a.elementor-button-link,
.cr-btn-secondary > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 36px !important;
	background-color: transparent !important;
	color: var(--cr-color-white) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	border: 2px solid var(--cr-color-white) !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	transition: all var(--cr-transition-fast) !important;
	cursor: pointer;
	line-height: 1;
}

.cr-btn-secondary .elementor-button:hover,
.cr-btn-secondary a.elementor-button-link:hover,
.cr-btn-secondary > a:hover {
	background-color: var(--cr-color-white) !important;
	color: var(--cr-color-black) !important;
	border-color: var(--cr-color-white) !important;
	transform: translateY(-2px);
}

/* Botón primario sobre fondo claro */
.cr-btn-primary-light .elementor-button,
.cr-btn-primary-light a.elementor-button-link,
.cr-btn-primary-light > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 36px !important;
	background-color: var(--cr-color-black) !important;
	color: var(--cr-color-white) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	transition: all var(--cr-transition-fast) !important;
	cursor: pointer;
	line-height: 1;
}

.cr-btn-primary-light .elementor-button:hover,
.cr-btn-primary-light a.elementor-button-link:hover,
.cr-btn-primary-light > a:hover {
	background-color: var(--cr-color-primary) !important;
	transform: translateY(-2px);
}

/* Botón secundario sobre fondo claro/rojo */
.cr-btn-secondary-light .elementor-button,
.cr-btn-secondary-light a.elementor-button-link,
.cr-btn-secondary-light > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 36px !important;
	background-color: var(--cr-color-white) !important;
	color: var(--cr-color-black) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	transition: all var(--cr-transition-fast) !important;
	cursor: pointer;
	line-height: 1;
}

.cr-btn-secondary-light .elementor-button:hover,
.cr-btn-secondary-light a.elementor-button-link:hover,
.cr-btn-secondary-light > a:hover {
	background-color: var(--cr-color-black) !important;
	color: var(--cr-color-white) !important;
	transform: translateY(-2px);
}

/* Botón outline (sobre fondo claro) */
.cr-btn-outline .elementor-button,
.cr-btn-outline a.elementor-button-link,
.cr-btn-outline > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 36px !important;
	background-color: transparent !important;
	color: var(--cr-color-black) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	border: 2px solid var(--cr-color-black) !important;
	border-radius: 100px !important;
	text-decoration: none !important;
	transition: all var(--cr-transition-fast) !important;
	cursor: pointer;
	line-height: 1;
}

.cr-btn-outline .elementor-button:hover,
.cr-btn-outline a.elementor-button-link:hover,
.cr-btn-outline > a:hover {
	background-color: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	border-color: var(--cr-color-primary) !important;
	transform: translateY(-2px);
}

/* Botón primario en modo oscuro */
.cr-btn-primary-dark {
	/* Usa el mismo estilo que primary */
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · EXPO HOOK — #cr-home-expo
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-expo {
	padding: 100px var(--cr-container-pad);
	background: linear-gradient(135deg, var(--cr-color-primary) 0%, var(--cr-color-primary-dark) 100%);
	color: var(--cr-color-white);
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	position: relative;
}

/* Textura sutil de puntos */
#cr-home-expo::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
	opacity: 1;
}

#cr-home-expo > * {
	position: relative;
	z-index: 1;
}

.cr-expo-eyebrow,
.cr-expo-eyebrow .elementor-heading-title {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}

.cr-expo-title,
.cr-expo-title .elementor-heading-title {
	color: var(--cr-color-white);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 28px 0;
	max-width: 900px;
}

.cr-expo-desc,
.cr-expo-desc p {
	color: rgba(255, 255, 255, 0.95);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	max-width: 640px;
	margin: 0 auto 40px auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · SERVICES GRID — #cr-home-services + .cr-service-card
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-services {
	padding: 120px var(--cr-container-pad);
	background-color: var(--cr-color-white);
	color: var(--cr-color-black);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-services-eyebrow,
.cr-services-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-services-title,
.cr-services-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
	text-align: center;
	max-width: 900px;
}

.cr-services-subtitle,
.cr-services-subtitle p {
	color: var(--cr-color-gray-600);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	max-width: 720px;
	margin: 0 auto 64px auto;
	text-align: center;
}

/* Grid de servicios */
.cr-services-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto;
}

/* Card de servicio base */
.cr-service-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	padding: 32px 28px !important;
	background-color: var(--cr-color-gray-100);
	border-radius: 24px;
	transition: all var(--cr-transition-base);
	overflow: hidden;
	min-height: 280px;
	cursor: pointer;
}

.cr-service-card:hover {
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cr-service-card h3,
.cr-service-card .elementor-heading-title {
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 16px 0;
	line-height: 1.2;
	color: inherit;
	transition: color var(--cr-transition-base);
}

.cr-service-card p,
.cr-service-card .elementor-text-editor {
	font-size: 15px;
	line-height: 1.5;
	color: inherit;
	opacity: 0.85;
	margin: 0 0 24px 0;
	flex: 1;
}

.cr-service-card a {
	color: var(--cr-color-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	transition: all var(--cr-transition-fast);
}

.cr-service-card:hover a {
	color: var(--cr-color-white);
	transform: translateX(4px);
}

/* Card destacado (Tapizado) — ocupa 2 columnas */
.cr-service-card-featured {
	grid-column: span 2;
	background: linear-gradient(135deg, var(--cr-color-primary) 0%, var(--cr-color-primary-dark) 100%);
	color: var(--cr-color-white);
	padding: 40px 36px !important;
}

.cr-service-card-featured h3,
.cr-service-card-featured .elementor-heading-title {
	font-size: 32px;
	color: var(--cr-color-white);
}

.cr-service-card-featured p {
	color: rgba(255, 255, 255, 0.95);
	font-size: 16px;
}

.cr-service-card-featured a {
	color: var(--cr-color-white);
}

.cr-service-card-featured::before {
	content: '★ ESTRELLA';
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.95);
	background: rgba(0, 0, 0, 0.3);
	padding: 6px 12px;
	border-radius: 100px;
}

.cr-service-card-featured:hover {
	background: var(--cr-color-black);
	transform: translateY(-8px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · MANIFIESTO — #cr-home-manifesto
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-manifesto {
	padding: 140px var(--cr-container-pad);
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
	min-height: 80vh;
}

#cr-home-manifesto::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 1;
}

#cr-home-manifesto > * {
	position: relative;
	z-index: 2;
}

.cr-manifesto-eyebrow,
.cr-manifesto-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 32px 0;
}

.cr-manifesto-title-outline,
.cr-manifesto-title-outline .elementor-heading-title {
	color: transparent;
	-webkit-text-stroke: var(--cr-outline-width) var(--cr-color-white);
	font-size: clamp(56px, 10vw, 140px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0 0 48px 0 !important;
}

.cr-manifesto-text,
.cr-manifesto-text p {
	color: rgba(255, 255, 255, 0.95);
	font-size: 18px;
	line-height: 1.7;
	font-weight: 400;
	max-width: 720px;
	margin: 0 auto 24px auto;
}

.cr-manifesto-text p:last-child {
	margin-bottom: 48px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · SHOP STRIP — #cr-home-shop
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-shop {
	padding: 120px 0;
	background-color: var(--cr-color-gray-100);
	color: var(--cr-color-black);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-shop-eyebrow,
.cr-shop-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-shop-title,
.cr-shop-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
	text-align: center;
}

.cr-shop-subtitle,
.cr-shop-subtitle p {
	color: var(--cr-color-gray-600);
	font-size: 17px;
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto 64px auto;
	text-align: center;
}

.cr-shop-strip {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto 64px auto;
	padding: 0 var(--cr-container-pad);
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · PORTAFOLIO — #cr-home-portfolio
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-portfolio {
	padding: 120px var(--cr-container-pad);
	background-color: var(--cr-color-white);
	color: var(--cr-color-black);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-portfolio-eyebrow,
.cr-portfolio-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-portfolio-title,
.cr-portfolio-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
	text-align: center;
}

.cr-portfolio-subtitle,
.cr-portfolio-subtitle p {
	color: var(--cr-color-gray-600);
	font-size: 17px;
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto 64px auto;
	text-align: center;
}

.cr-portfolio-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto 64px auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   §12 · TEAM CR — #cr-home-team
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-team {
	padding: 140px var(--cr-container-pad);
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-team-eyebrow,
.cr-team-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
}

.cr-team-title,
.cr-team-title .elementor-heading-title {
	color: var(--cr-color-white);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 32px 0;
	max-width: 900px;
}

.cr-team-text,
.cr-team-text p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto 48px auto;
}

.cr-team-visual {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto 48px auto;
	border-radius: 24px;
	overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   §13 · COMUNIDAD — #cr-home-community
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-community {
	padding: 120px var(--cr-container-pad);
	background-color: var(--cr-color-white);
	color: var(--cr-color-black);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-community-eyebrow,
.cr-community-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-community-title,
.cr-community-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
	text-align: center;
}

.cr-community-subtitle,
.cr-community-subtitle p {
	color: var(--cr-color-gray-600);
	font-size: 17px;
	line-height: 1.6;
	max-width: 680px;
	margin: 0 auto 48px auto;
	text-align: center;
}

.cr-community-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto 48px auto;
}

.cr-community-ctas {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   §14 · CTA FINAL — #cr-home-cta
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-cta {
	padding: 120px var(--cr-container-pad);
	background: linear-gradient(135deg, var(--cr-color-dark) 0%, var(--cr-color-black) 100%);
	color: var(--cr-color-white);
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-final-cta-title,
.cr-final-cta-title .elementor-heading-title {
	color: var(--cr-color-white);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 24px 0;
	max-width: 900px;
}

.cr-final-cta-subtitle,
.cr-final-cta-subtitle p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.6;
	max-width: 620px;
	margin: 0 auto 40px auto;
}

.cr-final-cta-buttons {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
}

.cr-final-cta-info,
.cr-final-cta-info p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 14px;
	line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   §15 · MARCAS + LOGO CAROUSEL — #cr-home-brands + .zenth-logo-carousel
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-brands {
	background-color: var(--cr-color-black) !important;
	padding: 80px 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	position: relative;
}

/* Título "Marcas Aliadas" */
.cr-brands-title,
.cr-brands-title .elementor-widget-container {
	margin: 0 0 40px 0 !important;
	padding: 0 !important;
	text-align: center !important;
}

.cr-brands-title .elementor-heading-title,
.cr-brands-title h1,
.cr-brands-title h2,
.cr-brands-title h3 {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(22px, 2.4vw, 32px) !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	margin: 0 !important;
}


.zenth-logo-carousel {
	/* Variables de configuración — editar aquí para cambiar el comportamiento */
	--cr-carousel-speed: 30s;     /* Duración del ciclo completo */
	--cr-carousel-height: 48px;   /* Altura de cada logo */
	--cr-carousel-gap: 80px;      /* Espacio entre logos */
	--cr-carousel-opacity: 0.7;   /* Opacidad base de los logos */

	width: 100%;
	overflow: hidden;
	position: relative;

	/* Gradient en los bordes para que los logos "desaparezcan" suavemente
	   en vez de cortarse bruscamente en los extremos. */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.zenth-logo-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--cr-carousel-gap);
	width: max-content; /* el track puede crecer todo lo que necesite */
	will-change: transform;
	animation: cr-carousel-scroll var(--cr-carousel-speed) linear infinite;
}

@keyframes cr-carousel-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* -50% porque el HTML duplica los logos: la mitad del track
		   es una copia exacta de la otra mitad. Al llegar a -50%, el
		   navegador ve la posición "idéntica" al 0% original y reinicia
		   sin corte visible. */
		transform: translateX(-50%);
	}
}

/* Pausar al pasar mouse (buena UX — permite leer un logo que llamó la atención) */
.zenth-logo-carousel:hover .zenth-logo-carousel__track {
	animation-play-state: paused;
}

/* Cada logo (slide) */
.zenth-logo-carousel__slide {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
	opacity: var(--cr-carousel-opacity);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.zenth-logo-carousel__slide img {
	display: block;
	height: var(--cr-carousel-height);
	width: auto;
	max-width: none;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Hover individual de un logo: se pone en 100% opacidad y se eleva sutil */
.zenth-logo-carousel__slide:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Filtrar logos a blanco (cuando el toggle "Los logos son oscuros" está ON).
   La técnica brightness(0) invert(1) fuerza cualquier imagen a blanco puro
   manteniendo la transparencia/alpha. */
.zenth-logo-carousel--filter-white .zenth-logo-carousel__slide img {
	filter: brightness(0) invert(1);
}


/* ═══════════════════════════════════════════════════════════════════════
   §16 · TRUST BAR — #cr-home-trust
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-trust {
	padding: 40px var(--cr-container-pad);
	background-color: var(--cr-color-white);
	border-bottom: 1px solid var(--cr-color-gray-200);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.cr-trust-label,
.cr-trust-label p {
	color: var(--cr-color-gray-400);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.cr-trust-logos {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 48px;
	opacity: 1;
	filter: grayscale(100%);
	transition: opacity var(--cr-transition-base);
}

.cr-trust-logos:hover {
	opacity: 0.8;
}

.cr-trust-logos img {
	max-height: 40px;
	width: auto;
	display: block;
}

.cr-trust-rating {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--cr-color-gray-600);
	font-size: 14px;
}

.cr-trust-rating strong {
	color: var(--cr-color-black);
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   §17 · BENEFITS — #cr-home-benefits
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-benefits {
	padding: 80px var(--cr-container-pad);
	background-color: var(--cr-color-gray-100);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-benefits-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto;
}

.cr-benefit-card {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px;
	background-color: var(--cr-color-white);
	border-radius: 16px;
	transition: transform var(--cr-transition-base), box-shadow var(--cr-transition-base);
}

.cr-benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cr-benefit-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--cr-color-primary) 0%, var(--cr-color-primary-dark) 100%);
	color: var(--cr-color-white);
	border-radius: 50%;
	font-size: 24px;
	margin-bottom: 16px;
}

.cr-benefit-title,
.cr-benefit-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 8px 0;
	line-height: 1.2;
}

.cr-benefit-desc,
.cr-benefit-desc p {
	color: var(--cr-color-gray-600);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §18 · TESTIMONIOS — #cr-home-testimonials
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-testimonials {
	padding: 120px var(--cr-container-pad);
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-testimonials-eyebrow,
.cr-testimonials-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-testimonials-title,
.cr-testimonials-title .elementor-heading-title {
	color: var(--cr-color-white);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 64px 0;
	text-align: center;
}

.cr-testimonials-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto;
}

.cr-testimonial-card {
	display: flex !important;
	flex-direction: column;
	padding: 32px;
	background-color: var(--cr-color-gray-800);
	border: 1px solid var(--cr-color-gray-700);
	border-radius: 16px;
	transition: all var(--cr-transition-base);
	position: relative;
}

.cr-testimonial-card::before {
	content: '"';
	position: absolute;
	top: 16px;
	left: 20px;
	font-size: 72px;
	font-weight: 900;
	color: var(--cr-color-primary);
	line-height: 1;
	opacity: 0.3;
}

.cr-testimonial-card:hover {
	transform: translateY(-4px);
	border-color: var(--cr-color-primary);
}

.cr-testimonial-stars {
	color: #FFB800;
	font-size: 16px;
	margin: 0 0 16px 0;
	letter-spacing: 2px;
}

.cr-testimonial-text,
.cr-testimonial-text p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 24px 0;
	font-style: italic;
	flex: 1;
}

.cr-testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.cr-testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cr-color-primary) 0%, var(--cr-color-primary-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cr-color-white);
	font-weight: 700;
	font-size: 16px;
}

.cr-testimonial-name {
	color: var(--cr-color-white);
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.cr-testimonial-project {
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	margin: 2px 0 0 0;
	line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════════════════
   §19 · FAQ — #cr-home-faq
   ═══════════════════════════════════════════════════════════════════════ */

#cr-home-faq {
	padding: 120px var(--cr-container-pad);
	background-color: var(--cr-color-white);
	color: var(--cr-color-black);
	display: flex !important;
	flex-direction: column;
	align-items: center;
}

.cr-faq-eyebrow,
.cr-faq-eyebrow .elementor-heading-title {
	color: var(--cr-color-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	text-align: center;
}

.cr-faq-title,
.cr-faq-title .elementor-heading-title {
	color: var(--cr-color-black);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	margin: 0 0 64px 0;
	text-align: center;
}

.cr-faq-list {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.cr-faq-item {
	border-bottom: 1px solid var(--cr-color-gray-200);
}

.cr-faq-item:first-child {
	border-top: 1px solid var(--cr-color-gray-200);
}

.cr-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 24px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}

.cr-faq-question-text {
	color: var(--cr-color-black);
	font-size: 18px;
	font-weight: 700;
	flex: 1;
	padding-right: 16px;
}

.cr-faq-toggle {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 300;
	transition: all var(--cr-transition-base);
}

.cr-faq-item.is-open .cr-faq-toggle {
	background-color: var(--cr-color-primary);
	transform: rotate(45deg);
}

.cr-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 400ms ease, padding 400ms ease;
}

.cr-faq-item.is-open .cr-faq-answer {
	max-height: 500px;
	padding-bottom: 24px;
}

.cr-faq-answer-text,
.cr-faq-answer-text p {
	color: var(--cr-color-gray-600);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §20 · WHATSAPP FLOAT — .cr-whatsapp-float
   ═══════════════════════════════════════════════════════════════════════ */

.cr-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	background-color: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
	z-index: 9999;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--cr-transition-base);
	animation: cr-whatsapp-pulse 2s ease-in-out infinite;
}

.cr-whatsapp-float:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6);
}

.cr-whatsapp-float svg {
	width: 28px;
	height: 28px;
	fill: white;
}

@keyframes cr-whatsapp-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4); }
	50% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   §21 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers de tamaño:  Tablet (≤1024) → Mobile (≤640).
   En el original había 3 @media a 1024 y 2 a 640 dispersos; acá se consolidan
   por tier SIN solapamiento de selectores (verificado), preservando el orden
   relativo de origen dentro de cada bloque.
   Al final, subsección de ACCESIBILIDAD (prefers-reduced-motion), que NO es
   un breakpoint de tamaño: 3 bloques (hero / carousel / secciones-cards) en
   su orden original, sin consolidar.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {

	/* §3 · Ocultar aside Expo en tablet/mobile */
	#cr-home-hero > .elementor-widget-zenth_hero_aside,
	#cr-home-hero .elementor-widget.elementor-widget-zenth_hero_aside,
	.zenth-hero-aside {
		display: none !important;
	}

	/* §1 · Reducir padding vertical en tablet */
	[id^="cr-home-"] {
		/* Reducir padding vertical en tablet */
	}

	/* §2 · Hero: menor alto + padding-bottom amplio para stats band */
	#cr-home-hero {
		min-height: 85vh;
		padding: 100px 24px 180px !important; /* padding-bottom amplio para stats band */
		text-align: left !important;
	}

	/* §4 · Stats band en tablet: full-width bottom, columnas */
	.cr-hero-stats {
		left: 0 !important;
		right: 0 !important;
		min-width: auto;
		max-width: 100%;
		border-radius: 32px 32px 0 0 !important;
		padding: 22px 24px !important;
	}

	/* §2 · Título hero */
	.cr-hero-title,
	.cr-hero-title .elementor-heading-title {
		font-size: clamp(34px, 6.5vw, 56px) !important;
	}

	/* §7–§14 · Padding de secciones generales */
	#cr-home-expo,
	#cr-home-services,
	#cr-home-shop,
	#cr-home-portfolio,
	#cr-home-community,
	#cr-home-cta {
		padding: 80px 24px;
	}

	/* §9 / §12 · Manifiesto + Team: padding propio */
	#cr-home-manifesto,
	#cr-home-team {
		padding: 100px 24px;
	}

	/* §8 · Services grid → 2 columnas */
	.cr-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cr-service-card-featured {
		grid-column: span 2;
	}

	/* §10 · Shop strip → 3 columnas */
	.cr-shop-strip {
		grid-template-columns: repeat(3, 1fr);
	}

	/* §11 · Portfolio grid → 2 columnas */
	.cr-portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* §13 · Community gallery → 3 columnas */
	.cr-community-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	/* §15 · Carousel de marcas: logos más pequeños en tablet */
	.zenth-logo-carousel {
		--cr-carousel-height: 40px;
		--cr-carousel-gap: 60px;
	}

	#cr-home-brands {
		padding: 60px 0 !important;
	}

	/* §17 · Benefits grid → 2 columnas */
	.cr-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* §18 · Testimonios grid → 1 columna */
	.cr-testimonials-grid {
		grid-template-columns: 1fr;
		max-width: 640px;
	}

	/* §16 · Trust logos: gap más chico */
	.cr-trust-logos {
		gap: 32px;
	}
}


/* ───────────────────────── MOBILE · max-width: 640px ──────────────────── */
@media (max-width: 640px) {

	/* §2 · Hero mobile */
	#cr-home-hero {
		min-height: 88vh;
		padding: 80px 16px 200px !important;
	}

	.cr-hero-title,
	.cr-hero-title .elementor-heading-title {
		font-size: clamp(30px, 8vw, 48px) !important;
	}

	.cr-hero-subtitle,
	.cr-hero-subtitle p {
		font-size: 14px !important;
	}

	/* §4 · Stats band mobile compacto */
	.cr-hero-stats {
		padding: 18px 12px !important;
		border-radius: 24px 24px 0 0 !important;
	}

	.cr-hero-stat {
		padding: 0 6px !important;
	}

	.cr-hero-stat__value,
	.cr-hero-stat__value .elementor-heading-title {
		font-size: 20px !important;
	}

	.cr-hero-stat__label,
	.cr-hero-stat__label p {
		font-size: 8.5px !important;
		letter-spacing: 1px !important;
	}

	/* §7–§14 · Padding de secciones generales */
	#cr-home-expo,
	#cr-home-services,
	#cr-home-shop,
	#cr-home-portfolio,
	#cr-home-community,
	#cr-home-cta {
		padding: 64px 16px;
	}

	/* §9 / §12 · Manifiesto + Team: padding propio */
	#cr-home-manifesto,
	#cr-home-team {
		padding: 80px 16px;
	}

	/* §8 / §10 / §11 · Grids → 1 columna */
	.cr-services-grid,
	.cr-shop-strip,
	.cr-portfolio-grid {
		grid-template-columns: 1fr;
	}

	/* §13 · Community gallery → 2 columnas */
	.cr-community-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	/* §8 · Service cards: 1 columna + alto mínimo menor */
	.cr-service-card,
	.cr-service-card-featured {
		grid-column: span 1;
		min-height: 220px;
	}

	.cr-service-card-featured::before {
		top: 12px;
		right: 12px;
		font-size: 10px;
		padding: 4px 10px;
	}

	/* §2 / §13 / §14 · CTAs apilados full-width */
	.cr-hero-ctas,
	.cr-community-ctas,
	.cr-final-cta-buttons {
		flex-direction: column;
		width: 100%;
	}

	.cr-hero-ctas .elementor-button,
	.cr-hero-ctas a.elementor-button-link,
	.cr-community-ctas .elementor-button,
	.cr-community-ctas a.elementor-button-link,
	.cr-final-cta-buttons .elementor-button,
	.cr-final-cta-buttons a.elementor-button-link {
		width: 100%;
		padding: 14px 24px !important;
		font-size: 13px !important;
	}

	/* §9 · Manifiesto outline: stroke + letter-spacing mobile */
	.cr-manifesto-title-outline,
	.cr-manifesto-title-outline .elementor-heading-title {
		-webkit-text-stroke-width: var(--cr-outline-width);
		text-stroke-width: var(--cr-outline-width);
		letter-spacing: 2px;
	}

	/* §15 · Carousel de marcas: logos aún más pequeños en mobile, gaps compactos */
	.zenth-logo-carousel {
		--cr-carousel-height: 32px;
		--cr-carousel-gap: 48px;
		--cr-carousel-speed: 25s; /* un pelín más rápido para que se vea más movimiento */
	}

	#cr-home-brands {
		padding: 48px 0 !important;
	}

	.cr-brands-title,
	.cr-brands-title .elementor-widget-container {
		margin-bottom: 28px !important;
	}

	/* §15 · Gradients laterales más estrechos en mobile (viewport chico) */
	.zenth-logo-carousel {
		-webkit-mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 5%,
			#000 95%,
			transparent 100%
		);
		mask-image: linear-gradient(
			90deg,
			transparent 0,
			#000 5%,
			#000 95%,
			transparent 100%
		);
	}

	/* §17 · Benefits grid → 1 columna */
	.cr-benefits-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* §16 · Trust bar: padding mobile */
	#cr-home-trust {
		padding: 32px 16px;
	}

	/* §17 · Benefits: padding mobile */
	#cr-home-benefits {
		padding: 64px 16px;
	}

	/* §18 / §19 · Testimonios + FAQ: padding mobile */
	#cr-home-testimonials,
	#cr-home-faq {
		padding: 80px 16px;
	}

	/* §16 · Trust logos: gap + altura mobile */
	.cr-trust-logos {
		gap: 24px;
	}

	.cr-trust-logos img {
		max-height: 28px;
	}

	/* §19 · FAQ: tamaño de pregunta mobile */
	.cr-faq-question-text {
		font-size: 16px;
	}

	/* §20 · WhatsApp float: posición + tamaño mobile */
	.cr-whatsapp-float {
		bottom: 16px;
		right: 16px;
		width: 52px;
		height: 52px;
	}

	.cr-whatsapp-float svg {
		width: 24px;
		height: 24px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   §21.A11Y · ACCESIBILIDAD — prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────
   NO son breakpoints de tamaño y NO se consolidan entre sí: 3 bloques
   independientes (hero animaciones / logo carousel / secciones+cards) en
   su orden de origen, con contenido intacto.
   ═══════════════════════════════════════════════════════════════════════ */

/* §5 · Hero: anular todas las animaciones de entrada y micro-hover */
@media (prefers-reduced-motion: reduce) {
	#cr-home-hero .cr-hero-title,
	#cr-home-hero .cr-hero-subtitle,
	#cr-home-hero .cr-hero-ctas,
	#cr-home-hero .cr-hero-stats,
	#cr-home-hero .elementor-widget-zenth_hero_aside,
	#cr-home-hero .cr-hero-title__outline,
	#cr-home-hero .cr-hero-ctas > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	#cr-home-hero .elementor-widget-zenth_hero_aside {
		transform: translateY(-50%) !important;
	}

	.zenth-hero-aside,
	#cr-home-hero .cr-btn-primary .elementor-button::after,
	#cr-home-hero .cr-btn-primary a.elementor-button-link::after {
		animation: none !important;
	}
}

/* §15 · Logo carousel: estático centrado en vez de marquee */
@media (prefers-reduced-motion: reduce) {
	.zenth-logo-carousel__track {
		animation: none !important;
		/* Grid estático centrado en vez de marquee */
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	/* Ocultar los duplicados para no mostrar doble */
	.zenth-logo-carousel__slide[aria-hidden="true"] {
		display: none;
	}
}

/* §1 + §6 / §8 · Secciones home + botones: transiciones casi instantáneas
   y sin lift en las cards de servicio */
@media (prefers-reduced-motion: reduce) {
	[id^="cr-home-"] *,
	[class*="cr-btn-"] * {
		transition-duration: 50ms !important;
	}

	.cr-service-card:hover,
	.cr-service-card-featured:hover {
		transform: none;
	}
}