/**
 * Culture Racing — Comunidad (/comunidad/)
 *
 * Estilos de la página Comunidad: hero manifiesto con stats, cards de
 * "qué significa ser gang", rodadas & meets (sección BLANCA), teaser del
 * Expo (patrón .cr-nextevt de sections.css), muro de la gang (widget
 * Zenth Gallery), franja de números y cards de redes sociales.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Scope + tokens     → body.cr-comunidad-page
 *   §2  Hero manifiesto    → .cr-com-hero (+ stats fila + scroll hint)
 *   §3  Manifesto cards    → .cr-com-manifesto (statement + grid 2 col)
 *   §4  Rodadas & meets    → .cr-com-rodadas (sección BLANCA + cards 3/4)
 *   §5  Stats strip        → .cr-com-stats (franja con divisores)
 *   §6  Social cards       → .cr-com-social (IG + TikTok)
 *   §7  RESPONSIVE         → TODOS los @media de tamaño consolidados acá
 *   §8  Accesibilidad      → prefers-reduced-motion
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá: 1200 (pre-tablet: grids colapsan) · 1024 (tablet)
 *   · 767 (mobile) · 600 (mobile-small: stats a 1 col)
 *   + 1 media de accesibilidad (prefers-reduced-motion) en §8.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · SCOPE + TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-comunidad-page {
	--cr-com-border: rgba(255, 255, 255, 0.08);
	--cr-com-border-hover: rgba(255, 255, 255, 0.15);
	--cr-com-card: var(--cr-color-dark, #1a1a1a);
	--cr-com-card-hover: #242424;
	--cr-com-muted: rgba(255, 255, 255, 0.65);
	--cr-com-faint: rgba(255, 255, 255, 0.45);
	--cr-com-instagram: #e1306c;
	--cr-com-tiktok: #00f2ea;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HERO MANIFIESTO — .cr-com-hero
   ═══════════════════════════════════════════════════════════════════════ */

body.cr-comunidad-page .cr-com-hero,
body.cr-comunidad-page .cr-com-hero.e-con {
	position: relative;
	min-height: 82vh;
	justify-content: center !important;
	background: linear-gradient(135deg, #1a1a1a 0%, var(--cr-color-black) 100%) !important;
	/* padding-bottom generoso: reserva la franja donde flota el hint de
	   scroll (absolute bottom) para que NUNCA pise las stats. */
	padding: clamp(64px, 10vw, 110px) var(--cr-container-pad, 32px) clamp(110px, 14vw, 150px) !important;
	overflow: hidden;
}

body.cr-comunidad-page .cr-com-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 60% at 50% 40%, rgba(192, 0, 0, 0.22) 0%, transparent 60%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 2px, transparent 2px, transparent 6px);
	pointer-events: none;
	z-index: 0;
}

body.cr-comunidad-page .cr-com-hero > * {
	position: relative;
	z-index: 1;
}

/* Título del hero (Heading, tag h1, con spans __solid/__solid--red). */
.cr-com-hero__title,
.cr-com-hero__title .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-display) !important;
	font-size: clamp(40px, 7.5vw, 104px) !important;
	font-weight: 400 !important;
	font-style: italic;
	line-height: 0.95 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

.cr-com-hero__subtitle,
.cr-com-hero__subtitle p,
.cr-com-hero__subtitle .elementor-widget-container {
	color: var(--cr-com-muted, rgba(255, 255, 255, 0.65)) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(16px, 2vw, 21px) !important;
	line-height: 1.4 !important;
	text-align: center !important;
	max-width: 680px !important;
	margin: 0 auto !important;
}

.cr-com-hero__subtitle p {
	margin: 0 !important;
}

/* Fila de stats del hero (UN widget HTML):
   <div class="cr-com-hero-stats">
     <div class="cr-com-hero-stat">
       <span class="cr-com-hero-stat__number"><span class="cr-com-accent">11.3</span>K</span>
       <span class="cr-com-hero-stat__label">En la gang</span>
     </div>…
   </div> */
.cr-com-hero-stats {
	display: flex;
	justify-content: center;
	gap: clamp(32px, 4vw, 48px);
	flex-wrap: wrap;
}

.cr-com-hero-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.cr-com-hero-stat__number {
	font-family: var(--cr-font-display);
	font-style: italic;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1;
	color: var(--cr-color-white);
	text-transform: uppercase;
}

.cr-com-accent {
	color: var(--cr-color-primary);
}

.cr-com-hero-stat__label {
	font-family: var(--cr-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-com-faint, rgba(255, 255, 255, 0.45));
}

/* Hint de scroll (HTML widget):
   <div class="cr-com-hero-scroll"><span>Scroll</span><span class="cr-com-hero-scroll__line"></span></div>

   GOTCHA: el wrapper .elementor-widget es position:relative por defecto →
   el absolute del hint se anclaría al wrapper (que está en el flujo, pegado
   a las stats) y no al hero. Neutralizamos el wrapper con :has para que el
   containing block sea el hero (position:relative) y bottom:32 sea real. */
.cr-com-hero .elementor-widget:has(.cr-com-hero-scroll),
.cr-com-hero .elementor-widget:has(.cr-com-hero-scroll) .elementor-widget-container {
	position: static !important;
}

.cr-com-hero-scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--cr-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cr-com-faint, rgba(255, 255, 255, 0.45));
	animation: cr-com-bounce 2.5s ease-in-out infinite;
	z-index: 1;
}

.cr-com-hero-scroll__line {
	width: 1px;
	height: 32px;
	background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.45) 100%);
}

@keyframes cr-com-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(8px); }
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · MANIFESTO CARDS — .cr-com-manifesto
   ═══════════════════════════════════════════════════════════════════════ */

/* Statement grande bajo el heading de sección (Text editor):
   <CSS: cr-com-manifesto__statement>. El span .cr-com-accent va en rojo. */
.cr-com-manifesto__statement,
.cr-com-manifesto__statement p,
.cr-com-manifesto__statement .elementor-widget-container {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(24px, 3.2vw, 40px) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	text-align: left !important;
	max-width: 800px;
}

.cr-com-manifesto__statement p {
	margin: 0 !important;
}

.cr-com-manifesto__statement .cr-com-accent {
	font-style: italic;
}

/* Grid 2 col de cards (container <CSS: cr-com-manifesto-grid> con 4
   icon-box widgets <CSS: cr-com-manifesto-card>). */
.cr-com-manifesto-grid,
.cr-com-manifesto-grid.e-con {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px !important;
	width: 100%;
	max-width: calc(var(--cr-container-max, 1440px) - 2 * var(--cr-container-pad, 32px));
	margin-inline: auto;
}

.cr-com-manifesto-card {
	position: relative;
	background: var(--cr-com-card, #1a1a1a);
	border: 1px solid var(--cr-com-border, rgba(255, 255, 255, 0.08));
	border-radius: 20px;
	padding: 40px 36px;
	overflow: hidden;
	transition: transform var(--cr-transition-base), border-color var(--cr-transition-base), background var(--cr-transition-base);
}

.cr-com-manifesto-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--cr-color-primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--cr-transition-base);
}

.cr-com-manifesto-card:hover {
	transform: translateY(-4px);
	border-color: var(--cr-com-border-hover, rgba(255, 255, 255, 0.15));
	background: var(--cr-com-card-hover, #242424);
}

.cr-com-manifesto-card:hover::before {
	transform: scaleY(1);
}

.cr-com-manifesto-card .elementor-icon-box-icon {
	margin-bottom: 24px !important;
}

.cr-com-manifesto-card .elementor-icon-box-icon .elementor-icon {
	display: inline-flex !important;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(192, 0, 0, 0.12) !important;
	border: 1px solid rgba(192, 0, 0, 0.25);
	color: var(--cr-color-primary) !important;
	fill: var(--cr-color-primary);
	font-size: 24px !important;
	align-items: center !important;
	justify-content: center !important;
}

.cr-com-manifesto-card .elementor-icon-box-icon .elementor-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.cr-com-manifesto-card .elementor-icon-box-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(20px, 2.2vw, 26px) !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 14px 0 !important;
}

.cr-com-manifesto-card .elementor-icon-box-description {
	color: var(--cr-com-muted, rgba(255, 255, 255, 0.65)) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · RODADAS & MEETS — .cr-com-rodadas (sección BLANCA)
   ═══════════════════════════════════════════════════════════════════════ */

/* ÚNICA sección clara del sitio: rompe el negro a propósito (contraste
   editorial, como el preview aprobado). El container exterior lleva
   <CSS: cr-com-rodadas> SIN cr-section (para no heredar el bg negro). */
body.cr-comunidad-page .cr-com-rodadas,
body.cr-comunidad-page .cr-com-rodadas.e-con {
	background: var(--cr-color-white) !important;
	padding: clamp(72px, 10vw, 120px) var(--cr-container-pad, 32px) !important;
}

/* Header de la sección en oscuro sobre blanco */
.cr-com-rodadas .cr-com-rodadas__title,
.cr-com-rodadas .cr-com-rodadas__title .elementor-heading-title {
	color: var(--cr-color-black) !important;
	font-family: var(--cr-font-display) !important;
	font-size: clamp(36px, 4.8vw, 64px) !important;
	font-weight: 400 !important;
	font-style: italic;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

.cr-com-rodadas .cr-com-rodadas__subtitle,
.cr-com-rodadas .cr-com-rodadas__subtitle p,
.cr-com-rodadas .cr-com-rodadas__subtitle .elementor-widget-container {
	color: #3a3a3a !important;
	font-family: var(--cr-font-body) !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
	text-align: center !important;
	max-width: 720px !important;
	margin: 0 auto !important;
}

.cr-com-rodadas .cr-com-rodadas__subtitle p {
	margin: 0 !important;
}

/* Grid de 3 cards (container <CSS: cr-com-rodadas-grid>). Cada card es
   UN widget HTML:

   <article class="cr-com-rodada-card" style="background-image:url(FOTO)">
     <span class="cr-com-rodada-card__scrim"></span>
     <div class="cr-com-rodada-card__content">
       <span class="cr-com-rodada-card__tag">Rodada urbana</span>
       <h3 class="cr-com-rodada-card__title">Rodada nocturna</h3>
       <p class="cr-com-rodada-card__text">Recorridos por Bogotá…</p>
     </div>
   </article>
*/
.cr-com-rodadas-grid,
.cr-com-rodadas-grid.e-con {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px !important;
	width: 100%;
	max-width: calc(var(--cr-container-max, 1440px) - 2 * var(--cr-container-pad, 32px));
	margin-inline: auto;
}

.cr-com-rodada-card {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, #2a2a2a 0%, #0f0f0f 100%);
	background-size: cover;
	background-position: center;
	transition: transform var(--cr-transition-base), box-shadow var(--cr-transition-base);
}

.cr-com-rodada-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}

.cr-com-rodada-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.92) 100%);
}

.cr-com-rodada-card__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px 28px;
	z-index: 2;
}

.cr-com-rodada-card__tag {
	display: inline-block;
	padding: 5px 12px;
	background: var(--cr-color-primary);
	border-radius: 100px;
	font-family: var(--cr-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cr-color-white);
	margin-bottom: 14px;
}

.cr-com-rodada-card__title {
	font-family: var(--cr-font-display);
	font-style: italic;
	font-size: 26px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 10px 0;
	color: var(--cr-color-white);
}

.cr-com-rodada-card__text {
	font-family: var(--cr-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · STATS STRIP — .cr-com-stats (franja con divisores)
   ═══════════════════════════════════════════════════════════════════════ */

/* UN widget HTML dentro de una cr-section:
   <div class="cr-com-stats">
     <div class="cr-com-stat">
       <span class="cr-com-stat__number"><span class="cr-com-accent">11.3</span>K</span>
       <span class="cr-com-stat__label">Seguidores IG</span>
     </div>…
   </div> */
.cr-com-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	max-width: calc(var(--cr-container-max, 1440px) - 2 * var(--cr-container-pad, 32px));
	margin-inline: auto;
}

.cr-com-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0 32px;
	border-right: 1px solid var(--cr-com-border, rgba(255, 255, 255, 0.08));
	text-align: center;
}

.cr-com-stat:last-child {
	border-right: none;
}

.cr-com-stat__number {
	font-family: var(--cr-font-display);
	font-style: italic;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1;
	color: var(--cr-color-white);
	text-transform: uppercase;
}

.cr-com-stat__label {
	font-family: var(--cr-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cr-com-faint, rgba(255, 255, 255, 0.45));
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · SOCIAL CARDS — .cr-com-social (IG + TikTok)
   ═══════════════════════════════════════════════════════════════════════ */

/* Grid 2 col (container <CSS: cr-com-social-grid>). Cada card es UN
   widget HTML (toda la card es un <a>):

   <a class="cr-com-social-card cr-com-social-card--ig" href="https://instagram.com/culture_racing_" target="_blank" rel="noopener">
     <span class="cr-com-social-card__icon">…svg ig…</span>
     <span class="cr-com-social-card__handle">@culture_racing_</span>
     <span class="cr-com-social-card__count">11.3K</span>
     <span class="cr-com-social-card__label">seguidores en Instagram</span>
     <span class="cr-com-social-card__cta">Seguir en Instagram <span>↗</span></span>
   </a>
*/
.cr-com-social-grid,
.cr-com-social-grid.e-con {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px !important;
	width: 100%;
	max-width: calc(var(--cr-container-max, 1440px) - 2 * var(--cr-container-pad, 32px));
	margin-inline: auto;
}

.cr-com-social-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 280px;
	border-radius: 24px;
	overflow: hidden;
	padding: 48px 40px;
	border: 1px solid var(--cr-com-border, rgba(255, 255, 255, 0.08));
	text-decoration: none;
	transition: transform var(--cr-transition-base), border-color var(--cr-transition-base), box-shadow var(--cr-transition-base);
}

.cr-com-social-card--ig {
	background: linear-gradient(135deg, #2a0a1f 0%, #0a0a0a 100%);
}

.cr-com-social-card--tiktok {
	background: linear-gradient(135deg, #0a1f1f 0%, #0a0a0a 100%);
}

.cr-com-social-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cr-com-social-card--ig::before {
	background: radial-gradient(ellipse at top right, rgba(225, 48, 108, 0.25) 0%, transparent 60%);
}

.cr-com-social-card--tiktok::before {
	background: radial-gradient(ellipse at top right, rgba(0, 242, 234, 0.18) 0%, transparent 60%);
}

.cr-com-social-card:hover {
	transform: translateY(-6px);
	border-color: var(--cr-com-border-hover, rgba(255, 255, 255, 0.15));
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.cr-com-social-card > * {
	position: relative;
	z-index: 1;
}

.cr-com-social-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--cr-color-white);
	margin-bottom: 24px;
}

.cr-com-social-card__icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.cr-com-social-card__handle {
	font-family: var(--cr-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--cr-com-muted, rgba(255, 255, 255, 0.65));
	margin-bottom: 6px;
}

.cr-com-social-card__count {
	font-family: var(--cr-font-display);
	font-style: italic;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1;
	color: var(--cr-color-white);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.cr-com-social-card__label {
	font-family: var(--cr-font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--cr-com-faint, rgba(255, 255, 255, 0.45));
	margin-bottom: 28px;
}

.cr-com-social-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 14px 24px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	font-family: var(--cr-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cr-color-white);
	align-self: flex-start;
	transition: background var(--cr-transition-fast), border-color var(--cr-transition-fast), color var(--cr-transition-fast);
}

.cr-com-social-card--ig:hover .cr-com-social-card__cta {
	background: var(--cr-com-instagram, #e1306c);
	border-color: var(--cr-com-instagram, #e1306c);
}

.cr-com-social-card--tiktok:hover .cr-com-social-card__cta {
	background: var(--cr-com-tiktok, #00f2ea);
	border-color: var(--cr-com-tiktok, #00f2ea);
	color: var(--cr-color-black);
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · RESPONSIVE — @media de tamaño (de más ancho a más angosto)
   ═══════════════════════════════════════════════════════════════════════ */

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

	/* §3 · Manifesto: 1 columna */
	.cr-com-manifesto-grid,
	.cr-com-manifesto-grid.e-con {
		grid-template-columns: 1fr;
	}

	/* §4 · Rodadas: 1 columna centrada */
	.cr-com-rodadas-grid,
	.cr-com-rodadas-grid.e-con {
		grid-template-columns: 1fr;
		max-width: 440px;
	}

	/* §5 · Stats: 2x2 con divisores horizontales */
	.cr-com-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	.cr-com-stat {
		padding: 16px 24px;
		border-right: none;
		border-bottom: 1px solid var(--cr-com-border, rgba(255, 255, 255, 0.08));
	}

	.cr-com-stat:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

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

	/* §2 · Hero un poco menos alto */
	body.cr-comunidad-page .cr-com-hero,
	body.cr-comunidad-page .cr-com-hero.e-con {
		min-height: 70vh;
	}

	/* §6 · Social: 1 columna */
	.cr-com-social-grid,
	.cr-com-social-grid.e-con {
		grid-template-columns: 1fr;
	}
}

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

	/* §2 · Hero compacto + sin hint de scroll (roba espacio) */
	body.cr-comunidad-page .cr-com-hero,
	body.cr-comunidad-page .cr-com-hero.e-con {
		min-height: 0;
		padding: 56px 24px 48px !important;
	}

	.cr-com-hero-scroll {
		display: none;
	}

	/* §3 · Cards con menos padding */
	.cr-com-manifesto-card {
		padding: 32px 24px;
	}

	/* §4 · Rodadas con menos padding vertical */
	body.cr-comunidad-page .cr-com-rodadas,
	body.cr-comunidad-page .cr-com-rodadas.e-con {
		padding: 64px 24px !important;
	}

	/* §6 · Social cards más compactas */
	.cr-com-social-card {
		min-height: 0;
		padding: 36px 28px;
	}
}

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

	/* §2 · Stats del hero apiladas */
	.cr-com-hero-stats {
		flex-direction: column;
		gap: 24px;
	}

	/* §5 · Stats strip a 1 columna */
	.cr-com-stats {
		grid-template-columns: 1fr;
		gap: 24px 0;
	}

	.cr-com-stat:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--cr-com-border, rgba(255, 255, 255, 0.08));
	}

	.cr-com-stat:last-child {
		border-bottom: none;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · ACCESIBILIDAD — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

	.cr-com-hero-scroll {
		animation: none;
	}

	.cr-com-manifesto-card,
	.cr-com-manifesto-card::before,
	.cr-com-rodada-card,
	.cr-com-social-card,
	.cr-com-social-card__cta {
		transition: none !important;
	}

	.cr-com-manifesto-card:hover,
	.cr-com-rodada-card:hover,
	.cr-com-social-card:hover {
		transform: none;
	}
}