/**
 * Culture Racing — Componente CR Steps
 *
 * Sección reutilizable de "pasos / reglas" en cards: encabezado centrado
 * (eyebrow + título split + subtítulo) seguido de una lista vertical de cards
 * numeradas que alternan estilo. Reutilizable en cualquier página
 * (/nosotros/, /servicios/, …). NO usa el scope body.cr-{pagina}-page: se
 * apoya en las clases .cr-steps__* + !important para ganarle a Elementor.
 * Las dependencias de animación (@property --cr-cta-angle y @keyframes
 * cr-cta-spin) viven en global.css.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper de sección  → .cr-steps / .cr-steps__inner
 *   §2  Header              → .cr-steps__header (eyebrow + título split + subtítulo)
 *   §3  Cards (lista)       → .cr-steps__cards / .cr-steps__card (+ alternancia)
 *   §4  Hover anillo        → .cr-steps__card::before (conic + mask-composite)
 *   §5  Badge numérico      → .cr-steps__card-number
 *   §6  Eyebrow de la card  → .cr-steps__card-eyebrow
 *   §7  Título de la card   → .cr-steps__card-title
 *   §8  Texto de la card    → .cr-steps__card-text
 *   §9  Reveal de entrada   → .cr-steps--reveal (IntersectionObserver, sin GSAP)
 *   §10 Responsive          → @media de tamaño + accesibilidad (al final)
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1024 (min-width, desktop reveal) · 768 (tablet) ·
 *   600 (mobile-small). Los de tamaño viven en §10. Hay además 1 media de
 *   ACCESIBILIDAD (prefers-reduced-motion) en la subsección a11y de §10.
 * ─────────────────────────────────────────────────────────────────────────
 * Estructura esperada en Elementor:
 *   .cr-steps                       (container sección)
 *     .cr-steps__inner              (flex column)
 *       .cr-steps__header           (eyebrow + título + subtítulo)
 *         .cr-steps__eyebrow
 *         .cr-steps__title  → .cr-steps__title-line > __title-solid / __title-outline
 *         .cr-steps__subtitle
 *       .cr-steps__cards  (uno por card)   ← cada card en su propio __cards
 *         .cr-steps__card
 *           .cr-steps__card-number   (badge circular)
 *           .cr-steps__card-eyebrow
 *           .cr-steps__card-title
 *           .cr-steps__card-text
 *
 * Alternancia (ver nota en la regla): se alternan los CONTENEDORES __cards
 * porque cada card es hija única de su __cards. Con __header en posición 1,
 * la paridad va invertida (card impar = __cards par).
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps,
.cr-steps.e-con,
.cr-steps.e-con-full {
	background: var(--cr-color-black) !important;
	padding: clamp(64px, 8vw, 120px) 0 !important;
	width: 100% !important;
}

.cr-steps__inner,
.cr-steps__inner.e-con-inner,
.cr-steps__inner.e-con,
.cr-steps__inner.e-con-full {
	max-width: 70rem;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(48px, 2vw, 80px) !important;
	width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HEADER — eyebrow + título split + subtítulo (centrado)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__header,
.cr-steps__header.e-con,
.cr-steps__header.e-con-full {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: clamp(20px, 2.5vw, 32px) !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Eyebrow rojo (mismo patrón que .cr-section-eyebrow--red). */
.cr-steps__eyebrow .elementor-heading-title,
.cr-steps__eyebrow .elementor-widget-container {
	color: var(--cr-color-primary) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(13px, 1vw, 15px) !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* Container del título split (centrado). */
.cr-steps__title .elementor-heading-title,
.cr-steps__title .elementor-widget-container {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(2px, 0.3vw, 6px) !important;
	margin: 0 !important;
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(36px, 4.5vw, 68px) !important;
	font-weight: 400 !important;
	line-height: 0.95 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.01em !important;
	color: var(--cr-color-white) !important;
	align-items: center !important;
}

.cr-steps__title-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.32em;
	justify-content: center;
}

.cr-steps__title-solid {
	color: var(--cr-color-white) !important;
	-webkit-text-fill-color: var(--cr-color-white) !important;
	font-family: inherit;
	font-weight: inherit;
}

.cr-steps__title-accent {
	color: var(--cr-color-primary) !important;
	-webkit-text-fill-color: var(--cr-color-primary) !important;
	font-family: inherit;
	font-weight: inherit;
	-webkit-text-stroke: 0 !important;
}

.cr-steps__title-outline {
	display: inline-block;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: var(--cr-outline-width) var(--cr-color-white);
	font-family: inherit;
	font-weight: inherit;
	background: transparent !important;
}

/* Subtítulo descriptivo */
.cr-steps__subtitle .elementor-widget-container,
.cr-steps__subtitle .elementor-widget-container p,
.cr-steps__subtitle .elementor-heading-title {
	font-family: var(--cr-font-body) !important;
	font-size: clamp(14px, 1.05vw, 16px) !important;
	font-weight: 400 !important;
	color: var(--cr-color-text-muted) !important;
	line-height: 1.6 !important;
	max-width: 540px !important;
	margin: 0 auto !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · CARDS — lista vertical (+ alternancia de fondo)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__cards,
.cr-steps__cards.e-con,
.cr-steps__cards.e-con-full {
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(24px, 3vw, 40px) !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Card individual: base común (el badge sobresale por el top-right). */
.cr-steps__card,
.cr-steps__card.e-con,
.cr-steps__card.e-con-full {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(10px, 1.2vw, 16px) !important;
	padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px) !important;
	border-radius: clamp(14px, 1.5vw, 20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	overflow: visible !important;
	width: 100% !important;
}

/* Alternancia.
   IMPORTANTE: en Elementor cada card vive en su PROPIO contenedor
   .cr-steps__cards (hija única), así que .card:nth-child() siempre da 1 y
   no alterna. Alternamos los CONTENEDORES __cards (sí son hermanos dentro
   del __inner). Como __inner abre con __header (posición 1), el 1er __cards
   cae en posición PAR → por eso la paridad va invertida respecto a la card:
     - card impar (1,3,5…) = __cards en posición par  → fondo gris SÓLIDO.
     - card par   (2,4,6…) = __cards en posición impar → transparente + border.
   Requiere que __inner abra con un solo __header antes de los __cards. */
.cr-steps__cards:nth-child(even) .cr-steps__card {
	background: var(--cr-color-gray-800, #2a2a2a) !important;
	border-color: transparent !important;
}

.cr-steps__cards:nth-child(odd) .cr-steps__card {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · HOVER ANILLO — borde giratorio + glow (conic + mask-composite)
   ───────────────────────────────────────────────────────────────────────
   El glow es un drop-shadow del propio anillo. @property/@keyframes en
   global.css. La variante prefers-reduced-motion (animation:none) vive en
   la subsección a11y de §10.
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__card::before {
	content: '';
	position: absolute;
	inset: -1.5px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(
		from var(--cr-cta-angle),
		transparent 0deg,
		var(--cr-color-primary, #c00000) 55deg,
		var(--cr-color-primary-hover, #e60000) 80deg,
		transparent 135deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	        mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 1;
}

.cr-steps__card:hover::before {
	opacity: 1;
	animation: cr-cta-spin 4s linear infinite;
	filter: drop-shadow(0 0 8px rgba(192, 0, 0, 0.6));
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · BADGE NUMÉRICO — top-right, sobresale
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__card-number,
.cr-steps__card-number.elementor-widget,
.cr-steps__card-number.elementor-element {
	position: absolute !important;
	top: 0 !important;
	right: clamp(20px, 3vw, 40px) !important;
	transform: translateY(-50%) !important;
	width: clamp(46px, 6vw, 60px) !important;
	min-width: clamp(46px, 6vw, 60px) !important;
	max-width: clamp(46px, 6vw, 60px) !important;
	height: clamp(46px, 6vw, 60px) !important;
	min-height: clamp(46px, 6vw, 60px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	z-index: 3 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cr-steps__card-number > .elementor-widget-container {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
}

.cr-steps__card-number .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(20px, 1.8vw, 26px) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	margin: 0 !important;
	margin-left: -11px !important;
	margin-top: -3px !important;
}

/* Badge cards impares (= __cards par) → rojo sólido. */
.cr-steps__cards:nth-child(even) .cr-steps__card .cr-steps__card-number,
.cr-steps__cards:nth-child(even) .cr-steps__card .cr-steps__card-number > .elementor-widget-container {
	background: var(--cr-color-primary) !important;
}

.cr-steps__cards:nth-child(even) .cr-steps__card .cr-steps__card-number {
	box-shadow: 0 4px 18px rgba(192, 0, 0, 0.45) !important;
}

/* Badge cards pares (= __cards impar) → gris oscuro con anillo sutil. */
.cr-steps__cards:nth-child(odd) .cr-steps__card .cr-steps__card-number,
.cr-steps__cards:nth-child(odd) .cr-steps__card .cr-steps__card-number > .elementor-widget-container {
	background: var(--cr-color-gray-800) !important;
}

.cr-steps__cards:nth-child(odd) .cr-steps__card .cr-steps__card-number {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · EYEBROW DE LA CARD
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__card-eyebrow .elementor-heading-title,
.cr-steps__card-eyebrow .elementor-widget-container {
	color: var(--cr-color-primary) !important;
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(14px, 1.2vw, 18px) !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding-right: clamp(72px, 6vw, 100px) !important;
}

/* Cards impares: eyebrow gris (el acento rojo lo lleva el badge). */
.cr-steps__cards:nth-child(even) .cr-steps__card .cr-steps__card-eyebrow .elementor-heading-title,
.cr-steps__cards:nth-child(even) .cr-steps__card .cr-steps__card-eyebrow .elementor-widget-container {
	color: var(--cr-color-text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · TÍTULO DE LA CARD
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__card-title .elementor-heading-title,
.cr-steps__card-title .elementor-widget-container {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(22px, 2.2vw, 32px) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.005em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding-right: clamp(72px, 6vw, 100px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · TEXTO DE LA CARD
   ───────────────────────────────────────────────────────────────────────
   El widget es un Heading (<p class="elementor-heading-title">); Elementor
   le inyecta un color por-elemento. Apuntamos a .elementor-heading-title +
   !important para forzar el gris.
   ═══════════════════════════════════════════════════════════════════════ */

.cr-steps__card-text .elementor-widget-container,
.cr-steps__card-text .elementor-widget-container p,
.cr-steps__card-text .elementor-heading-title {
	color: var(--cr-color-text-muted) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(13px, 1vw, 15px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	max-width: 70ch !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · REVEAL DE ENTRADA — reutilizable, sin GSAP
   ───────────────────────────────────────────────────────────────────────
   Lo activa steps.js añadiendo `.cr-steps--reveal` al root y `.is-visible`
   al header y a cada card cuando entran al viewport (IntersectionObserver).
   Progressive enhancement: si no hay JS / IO o el usuario pidió reducir
   movimiento, steps.js NO añade `.cr-steps--reveal` → nada se oculta.
   El escalonado entre cards sale natural (cada una revela al entrar).
   El ajuste desktop (entrada alternada izq/der) es un @media de tamaño y
   vive en §10.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header: hijos suben con fade + pequeño stagger. */
.cr-steps--reveal .cr-steps__header > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.cr-steps--reveal .cr-steps__header.is-visible > * {
	opacity: 1;
	transform: none;
}

.cr-steps--reveal .cr-steps__header.is-visible > *:nth-child(2) {
	transition-delay: 0.12s;
}

.cr-steps--reveal .cr-steps__header.is-visible > *:nth-child(3) {
	transition-delay: 0.24s;
}

/* Cards: fade + slide-up. En desktop entran alternando izquierda/derecha
   (matchea el bg alternante; el alternado desktop está en §10). */
.cr-steps--reveal .cr-steps__card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.cr-steps--reveal .cr-steps__card.is-visible {
	opacity: 1;
	transform: none;
}

/* Badge numérico: "pop" con rebote, disparado al revelarse la card.
   Preservamos el translateY(-50%) del posicionamiento (con !important para
   ganarle a la regla base que también lo declara !important). */
.cr-steps--reveal .cr-steps__card .cr-steps__card-number {
	opacity: 0;
	transform: translateY(-50%) scale(0) !important;
	transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	transition-delay: 0.2s;
}

.cr-steps--reveal .cr-steps__card.is-visible .cr-steps__card-number {
	opacity: 1;
	transform: translateY(-50%) scale(1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · RESPONSIVE — todos los @media de tamaño, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Desktop reveal (≥1024 min-width) → Tablet (≤768) → Mobile-small
   (≤600). Las reglas base correspondientes quedan ANTES (§1–§9). Al final,
   subsección de ACCESIBILIDAD (prefers-reduced-motion), que NO es un
   breakpoint de tamaño y no se consolida con los de arriba.

   NOTA de orden: el bloque desktop-reveal usa min-width (no max-width); va
   primero porque sus reglas base (.cr-steps--reveal, §9) ya están definidas
   arriba y este @media solo añade el desplazamiento alternado en desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── DESKTOP REVEAL · min-width: 1024px ───────────────── */
@media (min-width: 1024px) {
	/* §9 · Cards entran alternando izquierda/derecha (matchea el bg). */
	.cr-steps--reveal .cr-steps__cards:nth-child(even) .cr-steps__card:not(.is-visible) {
		transform: translateX(-40px);
	}
	.cr-steps--reveal .cr-steps__cards:nth-child(odd) .cr-steps__card:not(.is-visible) {
		transform: translateX(40px);
	}
}


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

	/* §1 · Section: padding vertical más compacto */
	.cr-steps {
		padding: clamp(48px, 10vw, 80px) 0 !important;
	}

	/* §1 · Inner: gap más chico */
	.cr-steps__inner {
		gap: clamp(32px, 6vw, 56px) !important;
	}

	/* §2 · Título split más chico */
	.cr-steps__title .elementor-heading-title,
	.cr-steps__title .elementor-widget-container {
		font-size: clamp(40px, 9vw, 64px) !important;
	}

	/* §5 · Badge un poco más chico para no comerse el padding. */
	.cr-steps__card-number {
		width: clamp(40px, 10vw, 50px) !important;
		height: clamp(40px, 10vw, 50px) !important;
		right: clamp(16px, 4vw, 28px) !important;
	}

	/* §6/§7 · Eyebrow + título de card: menos padding-right (badge más chico) */
	.cr-steps__card-eyebrow .elementor-heading-title,
	.cr-steps__card-title .elementor-heading-title {
		padding-right: clamp(56px, 14vw, 76px) !important;
	}
}


/* ──────────── MOBILE · max-width: 767px — ACORDEÓN (como el FAQ) ──────────
   En móvil cada card es un acordeón: se ve solo el header (número + eyebrow +
   título) y el TEXTO colapsa hasta tocar la card. Lo activa steps.js poniendo
   la clase .cr-steps__card--acc → sin JS no se agrega y todo queda visible
   (progressive enhancement). El despliegue usa grid-rows como el FAQ. */
@media (max-width: 767px) {
	.cr-steps__card--acc {
		cursor: pointer;
	}

	/* Texto colapsable (grid-rows: 0fr cerrado → 1fr abierto). */
	.cr-steps__card--acc .cr-steps__card-text {
		display: grid !important;
		grid-template-rows: minmax(0, 0fr);
		overflow: hidden;
		opacity: 0;
		transition: grid-template-rows var(--cr-transition-slow, 400ms cubic-bezier(0.4, 0, 0.2, 1)),
					opacity var(--cr-transition-base, 250ms ease);
	}
	.cr-steps__card--acc.is-acc-open .cr-steps__card-text {
		grid-template-rows: minmax(0, 1fr);
		opacity: 1;
	}
	.cr-steps__card--acc .cr-steps__card-text > * {
		min-height: 0;
		overflow: hidden;
	}

	/* Chevron indicador (abajo a la derecha del card), rota al abrir. */
	.cr-steps__card--acc::after {
		content: '';
		position: absolute;
		right: clamp(16px, 4vw, 24px);
		bottom: clamp(16px, 3.5vw, 22px);
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--cr-color-primary, #c00000);
		border-bottom: 2px solid var(--cr-color-primary, #c00000);
		transform: rotate(45deg);
		transition: transform var(--cr-transition-base, 250ms ease);
		pointer-events: none;
		z-index: 2;
	}
	.cr-steps__card--acc.is-acc-open::after {
		transform: rotate(-135deg);
	}
}


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

	/* §2 · Título split aún más chico en móvil */
	.cr-steps__title .elementor-heading-title,
	.cr-steps__title .elementor-widget-container {
		font-size: clamp(24px, 8vw, 40px) !important;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	/* §4 · Hover anillo: sin animación de giro. */
	.cr-steps__card:hover::before {
		animation: none;
	}
}