/**
 * Culture Racing — Página /nosotros/
 *
 * Estilos exclusivos de esta página. Solo se carga cuando la página tiene
 * slug `nosotros` (ver functions.php → cr_is_nosotros_page). Extiende layout
 * sobre los patrones reusables de sections.css; no los duplica.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §0  Aliases   → herencia de patrones reusables de sections.css
 *   §1  Hero      → two-col copy + foto hoodie con glow rojo + quote
 *   §2  Stats     → grid de 4 KPIs con tags numerados
 *   §3  Founder   → testimonio Andy con socials + CTA (borde giratorio)
 *   §4  Rules     → migrado a steps.css (.cr-steps__*) — solo nota acá
 *   §5  Profile   → spotlight de fundador con portrait + quote + nav arrows
 *   §6  Brands    → header + carousel infinito de logos
 *   §7  Responsive → TODOS los @media consolidados acá (tamaño + a11y)
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá (desktop es la base, sin media query):
 *   ≥1024 desktop-floor (min-width: solo stroke-width de outlines)
 *   1200 pre-tablet · 1024 tablet · 768 tablet-small · 767 mobile ·
 *   600 mobile-small · 480 mobile-xs
 *
 *   Todos los @media de tamaño viven en §7, ordenados de más ancho a más
 *   angosto. Después, una subsección de accesibilidad
 *   (prefers-reduced-motion), que NO es un breakpoint de tamaño y no se
 *   consolida con los de arriba.
 * ─────────────────────────────────────────────────────────────────────────
 * NOTA: El "Recorrido 2022-2026" (timeline) NO vive acá. Es un widget
 * Elementor del plugin: zenth-toolkit → "Zenth Timeline". Se puede insertar
 * como cualquier otro widget Zenth en cualquier página.
 *
 * ARQUITECTURA
 *  - Body scope: `body.cr-nosotros-page` (activado en functions.php)
 *  - Tokens globales del proyecto (sections.css, global.css):
 *      Colores  : --cr-color-black, --cr-color-primary, --cr-color-white,
 *                 --cr-color-text-muted (#81817f), --cr-color-gray-800
 *      Tipos    : --cr-font-body (Montserrat), --cr-font-display (Super Brigade)
 *      Container: --cr-container-max (1440px), --cr-container-pad (32px)
 *      Overlay  : --zenth-mm-overlay (rgba(0,0,0,0.7))
 *  - Background uniforme: var(--cr-color-black) — pure #000 como el resto
 *    del proyecto. NO usamos var(--cr-color-darker) (#0f0f0f).
 *  - Patrones reusables (NO duplicar acá): .cr-section-title,
 *    .cr-section-title__outline, .cr-section-title__solid--red,
 *    .cr-section-eyebrow, .cr-section-eyebrow--red, .cr-section-subtitle.
 *    Estos viven en sections.css. Esta hoja solo extiende layout.
 *  - !important obligatorio: Elementor inyecta inline-styles desde
 *    post-N.css con alta especificidad. Sin !important pierden.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §0 · ALIASES — Patrones reusables proyectados sobre clases custom
   ───────────────────────────────────────────────────────────────────────
   Las clases custom de esta página (cr-nosotros-X__title-outline,
   __eyebrow, __title-line, etc.) repiten patrones que ya existen en
   sections.css. Para no duplicar los valores ni obligar al usuario a
   agregar 2 clases por widget en Elementor, las agrupamos acá con la
   regla base y todas heredan al mismo tiempo.

   Si actualizás un valor base en sections.css (ej. -webkit-text-stroke
   width), TENÉS QUE replicarlo manualmente en este bloque. No hay
   sincronización automática.

   NOTA: el stroke-width responsive de los outlines (min-width:1024 y
   max-width:600) vive ahora en §7 RESPONSIVE, junto al resto de @media.
   ═══════════════════════════════════════════════════════════════════════ */


/* Eyebrow rojo — mismo estilo que .cr-section-eyebrow--red. */
body.cr-nosotros-page .cr-nosotros-hero__eyebrow .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-hero__eyebrow .elementor-widget-container,
body.cr-nosotros-page .cr-nosotros-stats__tag .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-founder__eyebrow .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-founder__eyebrow .elementor-widget-container,
body.cr-nosotros-page .cr-nosotros-brands__eyebrow .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-brands__eyebrow .elementor-widget-container,
body.cr-nosotros-page .cr-nosotros-profile__eyebrow .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-profile__eyebrow .elementor-widget-container,
body.cr-nosotros-page .cr-nosotros-hero__quote-eyebrow {
	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;
	line-height: 1 !important;
	margin: 0 !important;
}


/* Title-line helper — mismo flex inline que .cr-section-title-line. */
.cr-nosotros-hero__title-line,
.cr-nosotros-brands__title-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.32em;
}


/* Span solid blanco dentro de títulos split. */
.cr-nosotros-hero__title-solid,
.cr-nosotros-brands__title-solid {
	color: var(--cr-color-white) !important;
	-webkit-text-fill-color: var(--cr-color-white) !important;
	font-family: inherit;
	font-weight: inherit;
}

.cr-nosotros-brands__title-solid {
    font-size: 2rem;
}

.cr-nosotros-brands__title-outline {
    font-size: 5.4rem;
}

.cr-nosotros-brands .zenth-logo-carousel__slide img {
    height: 2.2rem;
}

/* Span solid rojo (accent) — mismo estilo que .cr-section-title__solid--red. */
.cr-nosotros-hero__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;
}


/* Span outline blanco — mismo estilo que .cr-section-title__outline.
   El stroke-width crece a 2px en desktop ≥1024px (efecto display más
   marcado en monitores grandes). El override responsive del stroke-width
   (min-width:1024 y max-width:600) está en §7 RESPONSIVE. */
.cr-nosotros-hero__title-outline,
.cr-nosotros-brands__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;
}


/* ═══════════════════════════════════════════════════════════════════════
   §1 · HERO — Two-column copy + foto + quote
   ───────────────────────────────────────────────────────────────────────
   Layout:
     ┌─────────────────────────────┬─────────────────────────────┐
     │ QUIÉNES SOMOS  (eyebrow)    │                             │
     │ EMPEZAMOS                   │      [FOTO HOODIE CR]       │
     │ CON UNA IDEA                │       con glow rojo         │
     │ SIMPLE (outline)            │                             │
     │ Párrafo 1...                │  ┌──────────────────────┐   │
     │ Párrafo 2 (blanco)...       │  │ DESDE 2022 | BOGOTÁ  │   │
     │ Párrafo 3...                │  │ Más que una tienda...│   │
     └─────────────────────────────┴──┴──────────────────────┴───┘
   Grid interno del lado derecho: imagen + quote como sub-cols. */


/* ── HERO — wrapper ──────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-hero,
.cr-nosotros-page .cr-nosotros-hero.e-con,
.cr-nosotros-page .cr-nosotros-hero.elementor-section {
	background: var(--cr-color-black) !important;
	padding: clamp(48px, 8vw, 96px) 0 !important;
	width: 100% !important;
	overflow: hidden !important;
}


/* Inner container two-column.

   Importante: usamos `align-items: stretch` (no center) para que la
   columna derecha pueda crecer y acomodar foto + quote sin que la
   foto se desplace verticalmente. */
.cr-nosotros-page .cr-nosotros-hero__inner,
.cr-nosotros-page .cr-nosotros-hero__inner.e-con-inner,
.cr-nosotros-page .cr-nosotros-hero__inner.e-con,
.cr-nosotros-page .cr-nosotros-hero__inner.e-con-full {
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	display: grid !important;
	/* Outer split ~42/58 matcheado al mockup: el lado derecho (foto + quote)
	   pesa más visualmente para que la imagen del hoodie tenga la presencia
	   dominante que muestra el diseño. */
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
	gap: clamp(32px, 5vw, 64px) !important;
	align-items: stretch !important;
	box-sizing: border-box !important;
	flex-direction: unset !important;
	width: 100% !important;
}


/* ─────────────────────────────────────────────────────────────────────
   COLUMNA IZQUIERDA: eyebrow + título split + copy
   ───────────────────────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-hero__left,
.cr-nosotros-page .cr-nosotros-hero__left.e-con,
.cr-nosotros-page .cr-nosotros-hero__left.e-con-full {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: clamp(20px, 2.5vw, 36px) !important;
	min-width: 0 !important;
}


/* Eyebrow, title-line, title-solid, title-accent, title-outline:
   estilos en §0 ALIASES al inicio del archivo. Aquí solo el container
   del título (display flex column + font-size). */
.cr-nosotros-page .cr-nosotros-hero__title .elementor-heading-title,
.cr-nosotros-page .cr-nosotros-hero__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.8vw, 76px) !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;
}


/* ── Copy: 3 párrafos ────────────────────────────────────────────────
   AJUSTE CRÍTICO: refuerzo de Montserrat con triple selector.

   Por qué el triple selector con !important:
   Elementor genera un CSS específico por página (post-53.css) que
   tiene reglas tipo `.elementor-widget-text-editor` con font-family
   default. Para ganarles necesitamos:
     1. Selector más específico (incluye body scope + clase wrapper)
     2. !important para vencer cualquier inline style
     3. Aplicar a TODOS los descendientes posibles donde el browser
        podría heredar Roboto.

   COLOR POR PÁRRAFO:
   El mockup tiene un patrón visual donde el párrafo del MEDIO va
   en blanco (jerarquía narrativa: es el corazón de la historia) y
   los párrafos 1 y 3 van en gris (--cr-color-text-muted = #81817f).
   Usamos :nth-child(2) para que el patrón sea automático sin que
   Andy tenga que recordar aplicar clases en Elementor. */
.cr-nosotros-page .cr-nosotros-hero__copy,
.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container,
.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container p,
.cr-nosotros-page .elementor-widget.cr-nosotros-hero__copy p {
	font-family: var(--cr-font-body) !important;
	color: var(--cr-color-text-muted) !important;
	font-size: clamp(14px, 1.05vw, 16px) !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
}


/* Párrafo central (el 2do) va en blanco — jerarquía narrativa. */
.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container p:nth-child(2) {
	color: var(--cr-color-text) !important;
}


.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	max-width: 52ch !important;
}


.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container p {
	margin: 0 !important;
}


.cr-nosotros-page .cr-nosotros-hero__copy strong {
	color: var(--cr-color-white) !important;
	font-weight: 600 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   COLUMNA DERECHA: grid interno [imagen | quote]
   ─────────────────────────────────────────────────────────────────────
   El __right ahora es un grid de 2 sub-columnas:
     - imagen (más ancha, ~7fr)
     - quote (angosto, ~3fr) alineado vertical al centro
   El glow rojo va concentrado en la zona inferior (donde está la
   moto en la foto) como halo ambiental.

   En tablet/mobile (≤1024px) este grid se colapsa a flex column y
   el quote vuelve a quedar debajo de la imagen — ver media query
   más abajo.
*/
.cr-nosotros-page .cr-nosotros-hero__right,
.cr-nosotros-page .cr-nosotros-hero__right.e-con,
.cr-nosotros-page .cr-nosotros-hero__right.e-con-full {
	display: grid !important;
	/* Imagen toma todo el espacio sobrante; el quote tiene min 220px para
	   que "DESDE 2022 | BOGOTÁ" quepa en una sola línea con el letter-
	   spacing aplicado. Max 280px evita que se vuelva un párrafo ancho
	   en pantallas muy grandes. */
	grid-template-columns: minmax(0, 1fr) clamp(220px, 22%, 280px) !important;
	gap: clamp(20px, 2.5vw, 36px) !important;
	min-width: 0 !important;
	position: relative;
	align-items: center !important;
	flex-direction: unset !important;
}


/* Glow ambiental rojo (pseudo ::before del container derecho).
   Centro vertical desplazado a 70% para que el halo nazca en la
   parte inferior de la imagen — donde están las luces traseras de
   la moto. Da el efecto del mockup de "rojo emanando de la moto". */
.cr-nosotros-page .cr-nosotros-hero__right::before {
	content: "";
	position: absolute;
	inset: -8% -8%;
	background: radial-gradient(
		ellipse 60% 50% at 35% 70%,
		rgba(192, 0, 0, 0.55) 0%,
		rgba(192, 0, 0, 0.28) 30%,
		rgba(192, 0, 0, 0.10) 55%,
		transparent 80%
	);
	pointer-events: none;
	z-index: 0;
}


/* Forzamos a foto y quote por encima del glow. */
.cr-nosotros-page .cr-nosotros-hero__right > * {
	position: relative;
	z-index: 1;
}


/* ── Wrapper de la imagen ───────────────────────────────────────────
   El aspect-ratio 2/3 coincide con el ratio nativo del archivo
   (683×1024 ≈ 0.667), así object-fit: cover no crop nada y se ve la
   imagen completa (helmet + hoodie + moto con luces). El max-height
   crece a 760px en pantallas grandes para dominar el hero como en
   el mockup. */
.cr-nosotros-page .cr-nosotros-hero__media,
.cr-nosotros-page .cr-nosotros-hero__media.elementor-widget {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 2 / 3 !important;
	max-height: clamp(480px, 72vh, 760px) !important;
	overflow: hidden !important;
	background: transparent !important;
	margin: 0 auto !important;
}


.cr-nosotros-page .cr-nosotros-hero__media .elementor-widget-container {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 1;
}


/* La imagen tiene fondo transparente recortado del hoodie, por eso
   el glow rojo del wrapper se ve a través de los bordes. Si la foto
   NO tiene fondo transparente, igual queda bien porque el glow se
   ve por los bordes del aspect-ratio (lados arriba/abajo del crop). */
.cr-nosotros-page .cr-nosotros-hero__media img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	max-width: none !important;
	position: relative;
	z-index: 2;
}


/* ── Quote block (sub-columna derecha del __right grid) ──────────────
   En desktop el quote vive a la derecha de la imagen, vertical
   centrado y con el texto right-aligned. En tablet/mobile el grid
   colapsa y el quote vuelve a quedar debajo de la imagen. */
.cr-nosotros-page .cr-nosotros-hero__quote,
.cr-nosotros-page .cr-nosotros-hero__quote.elementor-widget {
	align-self: center !important;
	justify-self: end !important;
	width: 100% !important;
	max-width: 22ch !important;
}

.cr-nosotros-page .cr-nosotros-hero__quote .elementor-widget-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	text-align: right !important;
	margin: 0 !important;
	width: 100% !important;
}


/* __quote-eyebrow base styles en §0 ALIASES; aquí solo el display. */
.cr-nosotros-page .cr-nosotros-hero__quote-eyebrow {
	display: inline-block;
}


/* Refuerzo de Montserrat también acá. */
.cr-nosotros-page .cr-nosotros-hero__quote,
.cr-nosotros-page .cr-nosotros-hero__quote p,
.cr-nosotros-page .cr-nosotros-hero__quote-text {
	font-family: var(--cr-font-body) !important;
}


.cr-nosotros-page .cr-nosotros-hero__quote-text {
	margin: 0 !important;
	/* Más chico que en la primera iteración (que llegaba a 20px). Con 18px
	   max el quote ocupa 3-4 líneas como el mockup, no 5-6 como antes. */
	font-size: clamp(15px, 1.05vw, 18px) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--cr-color-text-muted) !important;
}


.cr-nosotros-page .cr-nosotros-hero__quote-text strong {
	color: var(--cr-color-white) !important;
	font-weight: 600 !important;
}

/* Responsive del hero (1200 / 1024 / 767) en §7 RESPONSIVE. */


/* ═══════════════════════════════════════════════════════════════════════
   §2 · STATS — Grid de 4 KPIs (segunda sección, debajo del hero)
   ───────────────────────────────────────────────────────────────────────
   Layout deseado (mockup):
     ╶───/01─────/02─────/03─────/04───╴
       +500    11.3K     3      10+1
        ─       ─        ─        ─
      PROY..  EN LA..  EDIC..  RIDERS..
     ╶──────────────────────────────────╴

   - Líneas horizontales superior/inferior atraviesan la section
   - Tags /XX flotan sobre la línea superior con bg que "corta" la línea
   - Separadores verticales entre items (inset 12% arriba/abajo)
   - Línea corta debajo del número (pseudo-element)
   - Responsive: 4 cols → 2 cols en ≤768px
*/

.cr-nosotros-page .cr-nosotros-stats,
.cr-nosotros-page .cr-nosotros-stats.e-con,
.cr-nosotros-page .cr-nosotros-stats.e-con-full {
	background: var(--cr-color-black) !important;
	padding: 0 !important;
	width: 100% !important;
	position: relative !important;
}


/* Líneas horizontales como pseudo-elementos para no chocar con
   box-sizing de Elementor ni con paddings inyectados. */
.cr-nosotros-page .cr-nosotros-stats::before,
.cr-nosotros-page .cr-nosotros-stats::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
	z-index: 1;
}

.cr-nosotros-page .cr-nosotros-stats::before { top: 0; }
.cr-nosotros-page .cr-nosotros-stats::after  { bottom: 0; }


.cr-nosotros-page .cr-nosotros-stats__inner,
.cr-nosotros-page .cr-nosotros-stats__inner.e-con-inner,
.cr-nosotros-page .cr-nosotros-stats__inner.e-con,
.cr-nosotros-page .cr-nosotros-stats__inner.e-con-full {
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
	width: 100% !important;
	position: relative !important;
	flex-direction: unset !important;
}


.cr-nosotros-page .cr-nosotros-stats__item,
.cr-nosotros-page .cr-nosotros-stats__item.e-con,
.cr-nosotros-page .cr-nosotros-stats__item.e-con-full {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	/* Padding simétrico: el tag ya no flota dentro del item (vive en la
	   banda superior), así que no necesitamos reservar espacio arriba. */
	padding: clamp(28px, 3.2vw, 44px) clamp(16px, 2.5vw, 32px) !important;
	gap: clamp(6px, 0.8vw, 12px) !important;
	min-width: 0 !important;
	width: 100% !important;
	background: transparent !important;
}


/* Separadores verticales entre items — full height de la fila de números,
   para que continúen las verticales de la banda de tags (look de grilla). */
.cr-nosotros-page .cr-nosotros-stats__item::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.10);
	pointer-events: none;
}

.cr-nosotros-page .cr-nosotros-stats__item:last-child::after {
	display: none;
}


/* ─────────────────────────────────────────────────────────────────────
   BANDA DE TAGS — fila superior gris (container .cr-nosotros-stats__tags)
   ─────────────────────────────────────────────────────────────────────
   Container nuevo (creado en Elementor) que agrupa los 4 tags. Ocupa las
   4 columnas del inner (grid-column 1/-1) y se subdivide en su propio
   grid de 4 para que cada tag quede alineado sobre su número.
     · background gris  → BLOQUE 3
     · border-bottom    → 3ª línea horizontal (entre banda y números) — BLOQUE 1 */
.cr-nosotros-page .cr-nosotros-stats__tags,
.cr-nosotros-page .cr-nosotros-stats__tags.e-con,
.cr-nosotros-page .cr-nosotros-stats__tags.e-con-full {
	grid-column: 1 / -1 !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--cr-color-gray-800) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	position: relative !important;
	z-index: 1 !important;
}

/* TAG /XX — ahora ESTÁTICO, centrado en su celda de la banda (ya no flota
   absolute sobre la línea). */
.cr-nosotros-page .cr-nosotros-stats__tag,
.cr-nosotros-page .cr-nosotros-stats__tag.elementor-widget {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	width: 100% !important;
	padding: clamp(9px, 1.1vw, 14px) clamp(8px, 1vw, 12px) !important;
	z-index: auto !important;
}

/* Divisores verticales entre tags (todos menos el último). */
.cr-nosotros-page .cr-nosotros-stats__tags .cr-nosotros-stats__tag:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* El fondo del tag lo da ahora la banda: el wrapper queda transparente. */
.cr-nosotros-page .cr-nosotros-stats__tag .elementor-widget-container {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.cr-nosotros-page .cr-nosotros-stats__tag .elementor-heading-title {
	color: var(--cr-color-primary) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(11px, 0.85vw, 13px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	line-height: 1 !important;
	margin: 0 !important;
	text-transform: uppercase !important;
}


/* ─────────────────────────────────────────────────────────────────────
   NÚMERO grande (+500, 11.3K, 3, 10+1)
   ───────────────────────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-stats__number .elementor-heading-title,
.cr-nosotros-page .cr-nosotros-stats__number .elementor-widget-container {
	margin: 0 !important;
}

.cr-nosotros-page .cr-nosotros-stats__number .elementor-heading-title {
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(42px, 5vw, 80px) !important;
	font-weight: 400 !important;
	color: var(--cr-color-white) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
}


/* Línea corta entre número y label — pseudo del widget wrapper
   (cr-nosotros-stats__number es el div externo de Elementor, sin
   display:flex ni inline-styles que rompan el render del pseudo).
   Aparece debajo del h3 sin necesidad de widget adicional. */
.cr-nosotros-page .cr-nosotros-stats__number::after {
	content: '';
	display: block;
	width: clamp(48px, 5vw, 72px);
	height: 1px;
	background: rgba(255, 255, 255, 0.35);
	margin: clamp(12px, 1.5vw, 20px) auto 0;
}


/* ─────────────────────────────────────────────────────────────────────
   LABEL (gris uppercase, debajo del divider)
   ───────────────────────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-stats__label .elementor-heading-title,
.cr-nosotros-page .cr-nosotros-stats__label .elementor-widget-container {
	font-family: var(--cr-font-body) !important;
	font-size: clamp(11px, 0.85vw, 13px) !important;
	font-weight: 500 !important;
	color: var(--cr-color-text-muted) !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}


/* Responsive de stats (768 / 480) en §7 RESPONSIVE. */


/* ═══════════════════════════════════════════════════════════════════════
   §3 · FOUNDER QUOTE — Tercera sección: testimonio del fundador
   ───────────────────────────────────────────────────────────────────────
   Layout vertical centrado:
     ┌─────────────────────────────────┐
     │      [ANDY | FUNDADOR CR]       │  pill outline
     │                                 │
     │   "Cuando alguien sale del      │  quote grande blanca
     │   taller con su proyecto..."    │
     │                                 │
     │   CULTURE RACING NO ES TIENDA   │  eyebrow rojo
     │                                 │
     │   [ig] [yt] [sp] [tk]  [CTA→]   │  socials + cta pill
     └─────────────────────────────────┘
*/

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

.cr-nosotros-page .cr-nosotros-founder__inner,
.cr-nosotros-page .cr-nosotros-founder__inner.e-con-inner,
.cr-nosotros-page .cr-nosotros-founder__inner.e-con,
.cr-nosotros-page .cr-nosotros-founder__inner.e-con-full {
	max-width: 820px !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	/* Reducido para una composición más cohesiva (matchea mockup). */
	gap: clamp(24px, 3vw, 40px) !important;
	width: 100% !important;
}


/* ── BADGE pill "ANDY | FUNDADOR CR" ─────────────────────────────────
   Pill con borde delgado. El widget wrapper hace de pill (borde +
   border-radius), el texto del heading va dentro sin tocar el layout. */
.cr-nosotros-founder__badge,
.cr-nosotros-founder__badge.elementor-widget {
	display: inline-block !important;
	width: auto !important;
	/* Border más visible para que el pill destaque sobre el fondo negro. */
	border: 2px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 999px !important;
	padding: clamp(8px, 1vw, 12px) clamp(20px, 3vw, 32px) !important;
	transform: translateY(0) !important;
}

.cr-nosotros-founder__badge .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.cr-nosotros-founder__badge .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(11px, 0.9vw, 13px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	margin: 0 !important;
}


/* ── QUOTE grande ────────────────────────────────────────────────────
   Montserrat semibold, no Super Brigade (es body-tone, no display).
   Las comillas tipográficas las tipea el usuario en el contenido. */
.cr-nosotros-founder__quote .elementor-heading-title,
.cr-nosotros-founder__quote .elementor-widget-container,
.cr-nosotros-founder__quote .elementor-widget-container p {
	font-family: var(--cr-font-body) !important;
	font-size: clamp(20px, 2.2vw, 32px) !important;
	font-weight: 600 !important;
	color: var(--cr-color-white) !important;
	line-height: 1.4 !important;
	letter-spacing: -0.005em !important;
	margin: 0 !important;
}


/* __eyebrow rojo: estilos en §0 ALIASES. */

.cr-nosotros-founder__eyebrow {
    transform: translateY(0) !important;
}


/* ── CTA ROW: socials + button ──────────────────────────────────────
   Container flex que aglutina los social icons y el botón Contactanos
   en una sola fila. En mobile se apila. */
.cr-nosotros-founder__cta-row,
.cr-nosotros-founder__cta-row.e-con,
.cr-nosotros-founder__cta-row.e-con-full {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	/* Reducido para que socials y CTA queden agrupados visualmente, no
	   separados. Matchea el mockup compacto. */
	gap: clamp(40px, 2vw, 28px) !important;
	flex-wrap: wrap !important;
	width: auto !important;
	padding: 0 !important;
	margin-top: 1.4rem;
	width: 84% !important;
	transform: translateY(0) !important;
}

.cr-nosotros-founder__cta-row .cr-nosotros-founder__cta .elementor-button {
    padding: .4rem 2rem !important;
}

.cr-nosotros-founder__cta .elementor-button-content-wrapper {
    align-items: center;
    gap: .6rem;
}


/* ── Social icons (widget Elementor Social Icons) ──────────────────── */
.cr-nosotros-founder__socials .elementor-social-icons-wrapper {
	display: flex !important;
	gap: clamp(16px, 2vw, 28px) !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 !important;
}

.cr-nosotros-founder__socials .elementor-grid-item {
	margin: 0 !important;
}

.cr-nosotros-founder__socials .elementor-icon.elementor-social-icon,
.cr-nosotros-founder__socials .elementor-social-icon {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cr-color-white) !important;
	font-size: clamp(22px, 1.8vw, 26px) !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	border-radius: 0 !important;
	transition: color var(--cr-transition-base) !important;
}

.cr-nosotros-founder__socials .elementor-social-icon:hover,
.cr-nosotros-founder__socials .elementor-social-icon:focus {
	color: var(--cr-color-primary) !important;
	background: transparent !important;
}

.cr-nosotros-founder__socials .elementor-social-icon svg,
.cr-nosotros-founder__socials .elementor-social-icon i {
	fill: currentColor;
	color: inherit;
}


/* ── CTA pill "CONTACTANOS →" ───────────────────────────────────────
   Pill con borde blanco, texto blanco, y la flecha dentro de un
   círculo rojo a la derecha. Usa el widget Button de Elementor. */
.cr-nosotros-founder__cta .elementor-button-wrapper {
	display: inline-flex !important;
	width: auto !important;
}

.cr-nosotros-founder__cta .elementor-button,
.cr-nosotros-founder__cta a.elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	gap: clamp(12px, 1.5vw, 18px) !important;
	background: var(--cr-color-black, #000) !important;
	border: 2px solid #ffffff63 !important;
	border-radius: 999px !important;
	padding: 5px 5px 5px clamp(20px, 2.5vw, 32px) !important;
	color: #FFF !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(12px, 0.95vw, 14px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1 !important;
	transition: transform var(--cr-transition-base) !important;
}

.cr-nosotros-founder__cta .elementor-button:hover,
.cr-nosotros-founder__cta a.elementor-button:hover {
	color: #0a0a0a !important;
	transform: translateY(-1px) !important;
}

/* ── Borde giratorio con glow alrededor del CTA "CONTACTANOS" ─────────
   Rework del efecto "Always On" (antes era un "dot orbital"). Reusa el
   patrón conic-gradient + @property --cr-cta-angle + mask-composite, pero
   ahora el conic lleva un SEGMENTO de rojo que barre el perímetro como un
   borde brillante, más un GLOW blurreado detrás. Detalle de cada capa en
   las reglas de abajo (::before del botón = borde; ::before del wrapper =
   glow). No usa los <div> extra del snippet de referencia porque Elementor
   no permite markup arbitrario; el fondo blanco del botón hace de relleno.

   @property requiere Chrome 85+/Safari 16.4+/Firefox 128+. Sin soporte el
   ángulo queda fijo y el borde se ve estático — no se rompe el botón. */

/* @property --cr-cta-angle y @keyframes cr-cta-spin viven ahora en
   global.css (los comparten el CTA founder y el hover de .cr-steps). */

.cr-nosotros-founder__cta .elementor-button-wrapper {
	position: relative !important;
	overflow: visible !important;
}

.cr-nosotros-founder__cta .elementor-button,
.cr-nosotros-founder__cta a.elementor-button {
	position: relative !important;
	z-index: 1 !important;
	overflow: visible !important;
}

/* Borde giratorio: un SEGMENTO de rojo (~0-135°) barre el perímetro al
   animar el ángulo del conic; mask-composite: exclude deja solo el anillo
   de 2px sobre el fondo blanco del botón. */
.cr-nosotros-founder__cta .elementor-button::before,
.cr-nosotros-founder__cta a.elementor-button::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	padding: 2px;
	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;
	animation: cr-cta-spin 4s linear infinite;
	pointer-events: none;
	z-index: 2;
}

/* Glow: el mismo conic, blurreado y detrás del botón (en el wrapper). El
   botón blanco (z-index 1) tapa el centro; el blur sobresale por el inset
   negativo y crea el resplandor que sigue al barrido. */
.cr-nosotros-founder__cta .elementor-button-wrapper::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	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
	);
	filter: blur(11px);
	opacity: 0.85;
	animation: cr-cta-spin 4s linear infinite;
	pointer-events: none;
	z-index: 0;
}

/* La pausa de estas animaciones por prefers-reduced-motion vive en la
   subsección de accesibilidad de §7 RESPONSIVE. */

/* La flecha (icono del botón) se mete dentro de un círculo rojo */
.cr-nosotros-founder__cta .elementor-button-icon,
.cr-nosotros-founder__cta .elementor-align-icon-right {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: clamp(32px, 3.5vw, 30px) !important;
	height: clamp(32px, 3.5vw, 30px) !important;
	background: var(--cr-color-primary) !important;
	border-radius: 50% !important;
	color: var(--cr-color-white) !important;
	font-size: clamp(13px, 1vw, 15px) !important;
	margin: 0 !important;
}

.cr-nosotros-founder__cta .elementor-button-icon svg,
.cr-nosotros-founder__cta .elementor-button-icon i {
	color: var(--cr-color-white);
	fill: currentColor;
}


/* Responsive del founder (768) en §7 RESPONSIVE. La a11y del borde
   giratorio del CTA (prefers-reduced-motion) también vive en §7. */


/* ═══════════════════════════════════════════════════════════════════════
   §4 · RULES / STEPS — migrado a assets/css/steps.css (.cr-steps__*)
   ───────────────────────────────────────────────────────────────────────
   Este componente ya no vive en nosotros.css. Las "4 cards con badges"
   (cómo trabajamos) usan ahora las clases .cr-steps__* definidas en
   assets/css/steps.css. Se deja esta nota para conservar la numeración.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   §5 · PROFILE — "La mente detrás" (spotlight de fundador/miembro del team)
   ───────────────────────────────────────────────────────────────────────
   Two-column layout:

     ┌─────────────────┬──────────────────────────────────┐
     │                 │ LA MENTE DETRÁS         [●][○]   │
     │                 │ ANDY                             │
     │   [PORTRAIT]    │ FUNDADOR · FOTÓGRAFO · MOTERO    │
     │                 │                                  │
     │                 │ │ "No hago esto porque sea       │
     │                 │ │  negocio. Hago esto porque..."│
     │  [CAPITAN TEAM] │ │                                │
     │                 │ ANDY | FUNDADOR CR | 2024        │
     └─────────────────┴──────────────────────────────────┘

   - Imagen portrait 3:4 con pill badge sobre el bottom
   - Right column con flex column, contenido vertical centered
   - Arrows de carousel absolute en top-right (out of flow)
   - Quote con border-left rojo + highlight span en rojo
*/

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


.cr-nosotros-page .cr-nosotros-profile__inner,
.cr-nosotros-page .cr-nosotros-profile__inner.e-con-inner,
.cr-nosotros-page .cr-nosotros-profile__inner.e-con,
.cr-nosotros-page .cr-nosotros-profile__inner.e-con-full {
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
	gap: clamp(40px, 6vw, 96px) !important;
	align-items: stretch !important;
	width: 100% !important;
	flex-direction: unset !important;
}


/* ─────────────────────────────────────────────────────────────────────
   LEFT COLUMN — portrait + badge
   ───────────────────────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-profile__left,
.cr-nosotros-page .cr-nosotros-profile__left.e-con,
.cr-nosotros-page .cr-nosotros-profile__left.e-con-full {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	padding: 0 !important;
}


/* Imagen portrait con aspect 3/4 (matchea retratos verticales típicos) */
.cr-nosotros-profile__media,
.cr-nosotros-profile__media.elementor-widget {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	max-height: clamp(480px, 70vh, 720px) !important;
	overflow: hidden !important;
	margin: 0 !important;
}

.cr-nosotros-profile__media .elementor-widget-container {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

.cr-nosotros-profile__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	max-width: none !important;
	display: block !important;
}


/* Badge "CAPITAN TEAM CR" — pill outline overlay sobre el bottom de la foto */
.cr-nosotros-profile__badge,
.cr-nosotros-profile__badge.elementor-widget {
	position: absolute !important;
	bottom: clamp(20px, 3vw, 40px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 2 !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cr-nosotros-profile__badge .elementor-widget-container {
	margin: 0 !important;
	padding: clamp(10px, 1.2vw, 14px) clamp(24px, 3vw, 40px) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 999px !important;
	background: rgba(15, 15, 15, 0.55) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

.cr-nosotros-profile__badge .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(11px, 0.85vw, 13px) !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	margin: 0 !important;
	white-space: nowrap !important;
}


/* ─────────────────────────────────────────────────────────────────────
   RIGHT COLUMN — eyebrow + name + role + quote + nav arrows
   ───────────────────────────────────────────────────────────────────── */
.cr-nosotros-page .cr-nosotros-profile__right,
.cr-nosotros-page .cr-nosotros-profile__right.e-con,
.cr-nosotros-page .cr-nosotros-profile__right.e-con-full {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: clamp(12px, 1.5vw, 20px) !important;
	min-width: 0 !important;
	padding: clamp(20px, 2vw, 32px) clamp(60px, 6vw, 130px) 0 0 !important;
}


/* __eyebrow rojo: estilos en §0 ALIASES. */


/* Nombre grande (ANDY) — display italic */
.cr-nosotros-profile__name .elementor-heading-title,
.cr-nosotros-profile__name .elementor-widget-container {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-display) !important;
	font-style: italic !important;
	font-size: clamp(56px, 6vw, 96px) !important;
	font-weight: 400 !important;
	line-height: 0.95 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
}


/* Role / sub-title gris (FUNDADOR · FOTÓGRAFO · MOTERO) */
.cr-nosotros-profile__role .elementor-heading-title,
.cr-nosotros-profile__role .elementor-widget-container {
	color: var(--cr-color-text-muted) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(13px, 1vw, 16px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}


/* Quote block con border-left rojo */
.cr-nosotros-profile__quote,
.cr-nosotros-profile__quote.elementor-widget {
	margin-top: clamp(28px, 3.5vw, 56px) !important;
	padding-left: clamp(20px, 2.2vw, 32px) !important;
	border-left: 3px solid var(--cr-color-primary) !important;
}

.cr-nosotros-profile__quote .elementor-widget-container,
.cr-nosotros-profile__quote .elementor-widget-container p,
.cr-nosotros-profile__quote .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(15px, 1.3vw, 20px) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: -0.005em !important;
	margin: 0 !important;
}

/* Highlight rojo dentro del quote — usar <span class="cr-nosotros-profile__quote-highlight"> */
.cr-nosotros-profile__quote-highlight,
.cr-nosotros-profile__quote .cr-nosotros-profile__quote-highlight {
	color: var(--cr-color-primary) !important;
	font-weight: inherit !important;
}


/* Atribución (ANDY | FUNDADOR CR | ENTREVISTA 2024) */
.cr-nosotros-profile__attribution .elementor-heading-title,
.cr-nosotros-profile__attribution .elementor-widget-container,
.cr-nosotros-profile__attribution .elementor-widget-container p {
	color: var(--cr-color-text-muted) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(10px, 0.78vw, 12px) !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	margin: clamp(12px, 1.5vw, 20px) 0 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   NAV ARROWS — top-right de la columna derecha (carousel nav)
   ─────────────────────────────────────────────────────────────────────
   Container con 2 íconos. Posicionado absolute para no afectar el
   flujo del contenido textual. */
.cr-nosotros-profile__nav,
.cr-nosotros-profile__nav.e-con,
.cr-nosotros-profile__nav.e-con-full {
	position: absolute !important;
	top: clamp(16px, 2vw, 28px) !important;
	right: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	gap: clamp(10px, 1.2vw, 14px) !important;
	z-index: 3 !important;
	padding: 0 !important;
	width: auto !important;
	margin: 0 !important;
}


/* Cada arrow es un Icon widget; el wrapper se vuelve el círculo */
.cr-nosotros-profile__nav-prev,
.cr-nosotros-profile__nav-prev.elementor-widget,
.cr-nosotros-profile__nav-next,
.cr-nosotros-profile__nav-next.elementor-widget {
	width: clamp(40px, 3.5vw, 50px) !important;
	height: clamp(40px, 3.5vw, 50px) !important;
	min-width: clamp(40px, 3.5vw, 50px) !important;
	min-height: clamp(40px, 3.5vw, 50px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	transition: all var(--cr-transition-base) !important;
}

/* PREV (rojo filled, indicador activo) */
.cr-nosotros-profile__nav-prev,
.cr-nosotros-profile__nav-prev.elementor-widget {
	background: var(--cr-color-primary) !important;
	border: 1px solid var(--cr-color-primary) !important;
}

.cr-nosotros-profile__nav-prev:hover {
	background: var(--cr-color-primary-hover) !important;
}

/* NEXT (outline, transparent) */
.cr-nosotros-profile__nav-next,
.cr-nosotros-profile__nav-next.elementor-widget {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.cr-nosotros-profile__nav-next:hover {
	border-color: var(--cr-color-white) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

/* El ícono dentro de cada arrow */
.cr-nosotros-profile__nav-prev .elementor-widget-container,
.cr-nosotros-profile__nav-next .elementor-widget-container,
.cr-nosotros-profile__nav-prev .elementor-icon-wrapper,
.cr-nosotros-profile__nav-next .elementor-icon-wrapper {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.cr-nosotros-profile__nav-prev .elementor-icon,
.cr-nosotros-profile__nav-next .elementor-icon {
	color: var(--cr-color-white) !important;
	font-size: clamp(14px, 1.1vw, 16px) !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.cr-nosotros-profile__nav-prev .elementor-icon svg,
.cr-nosotros-profile__nav-next .elementor-icon svg {
	width: 1em !important;
	height: 1em !important;
	fill: currentColor !important;
}


/* Responsive del profile (1024 / 600) en §7 RESPONSIVE. */


/* ═══════════════════════════════════════════════════════════════════════
   §6 · BRANDS — "Marcas que respetan la cultura" (partners/sponsors row)
   ───────────────────────────────────────────────────────────────────────
   Header centrado (eyebrow + split title) + row de 5 logos en
   monocromo. Patrón estructural idéntico al de rules header.

     ┌─────────────────────────────────────────────────┐
     │      TRABAJAMOS CON LOS MEJORES                 │
     │      MARCAS QUE RESPETAN                        │
     │      LA CULTURA (outline)                       │
     │                                                 │
     │   [akita]  [sold]  [dpmotos]  [gran]  [monser]  │
     └─────────────────────────────────────────────────┘

   Los logos se renderizan en blanco/grayscale automáticamente via
   filter, así Andy puede subir el logo original a color sin tener
   que pre-procesarlo.
*/

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


.cr-nosotros-page .cr-nosotros-brands__inner,
.cr-nosotros-page .cr-nosotros-brands__inner.e-con-inner,
.cr-nosotros-page .cr-nosotros-brands__inner.e-con,
.cr-nosotros-page .cr-nosotros-brands__inner.e-con-full {
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: clamp(48px, 6vw, 88px) !important;
	width: 100% !important;
}


/* ── HEADER centrado (eyebrow + split title) ─────────────────────── */
.cr-nosotros-page .cr-nosotros-brands__header,
.cr-nosotros-page .cr-nosotros-brands__header.e-con,
.cr-nosotros-page .cr-nosotros-brands__header.e-con-full {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: clamp(16px, 2vw, 28px) !important;
	max-width: 1000px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	width: 100% !important;
}


/* __eyebrow, __title-line, __title-solid, __title-outline:
   estilos en §0 ALIASES. Aquí solo el container del título split. */
body.cr-nosotros-page .cr-nosotros-brands__title .elementor-heading-title,
body.cr-nosotros-page .cr-nosotros-brands__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(40px, 5.2vw, 80px) !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;
}

/* Title-line del brands: centered (matchea rules). */
.cr-nosotros-brands__title-line {
	justify-content: center;
}


/* ── LOGOS — wrapper opcional para el widget Zenth Logo Carousel ─────
   El widget trae su propio CSS (.zenth-logo-carousel*) definido global-
   mente en home.css con el marquee infinito, pause on hover, mask edges
   y filter-white. Acá solo dejamos un wrapper neutro por si Andy quiere
   meterlo en una sub-container con más espacio/padding.

   Override scoped para esta página: subir un poco la altura del logo y
   bajar la velocidad del scroll para que se sienta más premium en este
   contexto que en el home. */
body.cr-nosotros-page .cr-nosotros-brands .zenth-logo-carousel {
	--cr-carousel-speed: 40s !important;
	--cr-carousel-height: clamp(40px, 3.5vw, 56px) !important;
	--cr-carousel-gap: clamp(48px, 6vw, 96px) !important;
	--cr-carousel-opacity: 0.6 !important;
}


/* Responsive de brands (1024 / 600) en §7 RESPONSIVE. */


/* ═══════════════════════════════════════════════════════════════════════
   §7 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  ≥1024 desktop-floor (min-width) → 1200 → 1024 → 768 → 767 →
           600 → 480 (todos max-width). El cascade max-width va de mayor a
           menor, así el breakpoint más chico siempre pisa al más grande
           dentro de su rango.

   Al final, una subsección de ACCESIBILIDAD (prefers-reduced-motion), que
   NO es un breakpoint de tamaño y no se consolida con los de arriba.

   Cada bloque dentro de un @media va etiquetado con el §N del componente
   que toca (§1 Hero, §2 Stats, §3 Founder, §5 Profile, §6 Brands).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── DESKTOP-FLOOR · min-width: 1024px ────────────────────── */
@media (min-width: 1024px) {

	/* §0/§1/§6 · Outline de títulos: stroke-width display más marcado en
	   monitores grandes (hero + brands comparten el span outline). */
	.cr-nosotros-hero__title-outline,
	.cr-nosotros-brands__title-outline {
		-webkit-text-stroke-width: var(--cr-outline-width);
	}
}


/* ───────────────────────── PRE-TABLET · max-width: 1200px ─────────────── */
/* §1 · Hero: título un escalón abajo. */
@media (max-width: 1200px) {
	.cr-nosotros-page .cr-nosotros-hero__inner {
		gap: clamp(24px, 4vw, 48px) !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__title .elementor-heading-title,
	.cr-nosotros-page .cr-nosotros-hero__title .elementor-widget-container {
		font-size: clamp(32px, 4vw, 56px) !important;
	}
}


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

	/* §1 · Hero: todo en una columna, el __right interno se colapsa también
	   a flex column (imagen arriba, quote abajo). El quote vuelve a ir
	   alineado a la izquierda porque el layout split-right pierde sentido
	   cuando ya no hay imagen al lado. */
	.cr-nosotros-page .cr-nosotros-hero__inner {
		grid-template-columns: 1fr !important;
		gap: clamp(32px, 5vw, 64px) !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__right {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: unset !important;
		max-width: 600px !important;
		margin: 0 auto !important;
		width: 100% !important;
		gap: clamp(20px, 4vw, 32px) !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__quote {
		max-width: 100% !important;
		justify-self: unset !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__quote .elementor-widget-container {
		text-align: left !important;
		max-width: 100% !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__title .elementor-heading-title,
	.cr-nosotros-page .cr-nosotros-hero__title .elementor-widget-container {
		font-size: clamp(44px, 8vw, 80px) !important;
	}

	/* §5 · Profile: grid a una columna, portrait centrado, nav al tope. */
	.cr-nosotros-page .cr-nosotros-profile__inner {
		grid-template-columns: 1fr !important;
		gap: clamp(32px, 5vw, 56px) !important;
	}

	.cr-nosotros-page .cr-nosotros-profile__left {
		max-width: 520px !important;
		margin: 0 auto !important;
		width: 100% !important;
	}

	.cr-nosotros-page .cr-nosotros-profile__right {
		padding-right: 0 !important;
		padding-top: clamp(40px, 6vw, 60px) !important;
	}

	.cr-nosotros-profile__nav {
		top: 0 !important;
	}

	/* §6 · Brands: título un escalón abajo. */
	body.cr-nosotros-page .cr-nosotros-brands__title .elementor-heading-title,
	body.cr-nosotros-page .cr-nosotros-brands__title .elementor-widget-container {
		font-size: clamp(36px, 7vw, 60px) !important;
	}
}


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

	/* §2 · Stats: 4 cols → 2 cols. OJO con el offset: el container __tags es
	   el 1er hijo del __inner, así que los items son nth-child 2,3,4,5
	   (no 1-4). */
	.cr-nosotros-page .cr-nosotros-stats__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* La banda de tags pasa a 2 columnas (2 tags por fila). */
	.cr-nosotros-page .cr-nosotros-stats__tags {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Divisores de la banda en 2-col: solo entre la columna izq y der
	   (tags impares = col izq) + línea horizontal bajo la 1ª fila de tags. */
	.cr-nosotros-page .cr-nosotros-stats__tags .cr-nosotros-stats__tag:not(:last-child) {
		border-right: none !important;
	}
	.cr-nosotros-page .cr-nosotros-stats__tags .cr-nosotros-stats__tag:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
	}
	.cr-nosotros-page .cr-nosotros-stats__tags .cr-nosotros-stats__tag:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	}

	/* Items: la columna derecha (nth-child 3 y 5 por el offset) no lleva
	   divisor vertical. */
	.cr-nosotros-page .cr-nosotros-stats__item:nth-child(odd)::after {
		display: none !important;
	}

	/* Línea horizontal bajo la 1ª fila de items (item 1 y 2 = nth-child 2,3). */
	.cr-nosotros-page .cr-nosotros-stats__item:nth-child(2),
	.cr-nosotros-page .cr-nosotros-stats__item:nth-child(3) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	}

	/* §3 · Founder: padding/gap más compactos, quote más chico, CTA-row
	   apilada. */
	.cr-nosotros-page .cr-nosotros-founder {
		padding: clamp(48px, 10vw, 80px) 0 !important;
	}

	.cr-nosotros-page .cr-nosotros-founder__inner {
		gap: clamp(24px, 5vw, 40px) !important;
	}

	.cr-nosotros-founder__quote .elementor-heading-title,
	.cr-nosotros-founder__quote .elementor-widget-container p {
		font-size: clamp(18px, 4.5vw, 24px) !important;
	}

	.cr-nosotros-founder__cta-row {
		flex-direction: column !important;
		gap: clamp(20px, 4vw, 28px) !important;
	}
}


/* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */
/* §1 · Hero: tipografía más chica, padding ajustado. */
@media (max-width: 767px) {
	.cr-nosotros-page .cr-nosotros-hero {
		padding: clamp(32px, 8vw, 64px) 0 !important;
	}

	.cr-nosotros-page .cr-nosotros-hero__title .elementor-heading-title,
	.cr-nosotros-page .cr-nosotros-hero__title .elementor-widget-container {
		font-size: clamp(36px, 10vw, 56px) !important;
		gap: 2px !important;
	}

	/* __title-outline stroke-width responsive más abajo (max-width:600px). */

	.cr-nosotros-page .cr-nosotros-hero__copy .elementor-widget-container {
		max-width: 100% !important;
	}
}


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

	/* §0/§1/§6 · Outline de títulos: mantener stroke-width consistente en
	   pantallas chicas (hero + brands comparten el span outline). */
	.cr-nosotros-hero__title-outline,
	.cr-nosotros-brands__title-outline {
		-webkit-text-stroke-width: var(--cr-outline-width);
	}

	/* §5 · Profile: nombre (ANDY) más chico para que no se desborde. */
	.cr-nosotros-profile__name .elementor-heading-title,
	.cr-nosotros-profile__name .elementor-widget-container {
		font-size: clamp(48px, 14vw, 72px) !important;
	}

	/* §6 · Brands: bajar agresivamente el título. "MARCAS QUE RESPETAN" tiene
	   18 chars; en italic Super Brigade a 36px es ~520px de ancho, lo que se
	   desborda en pantallas de 360-414px. */
	body.cr-nosotros-page .cr-nosotros-brands__title .elementor-heading-title,
	body.cr-nosotros-page .cr-nosotros-brands__title .elementor-widget-container {
		font-size: clamp(22px, 7vw, 36px) !important;
	}
}


/* ─────────────────────── MOBILE-XS · max-width: 480px ─────────────────── */
/* §2 · Stats: bajar tamaño del número para que +500 / 11.3K no se
   desborden. */
@media (max-width: 480px) {
	.cr-nosotros-page .cr-nosotros-stats__number .elementor-heading-title {
		font-size: clamp(40px, 14vw, 64px) !important;
	}

	.cr-nosotros-page .cr-nosotros-stats__item {
		padding: clamp(28px, 7vw, 40px) 12px !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════════
   §7.a · ACCESIBILIDAD — prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────
   No son breakpoints de tamaño: cortan transiciones/animaciones cuando el
   usuario pide menos movimiento. Se mantienen como bloques separados (uno
   por componente), sin consolidar con los @media de tamaño de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* §1 · Hero: cortar cualquier transición/animación. */
@media (prefers-reduced-motion: reduce) {
	.cr-nosotros-page .cr-nosotros-hero,
	.cr-nosotros-page .cr-nosotros-hero * {
		transition: none !important;
		animation: none !important;
	}
}

/* §3 · Founder: detener el borde giratorio + glow del CTA "CONTACTANOS". */
@media (prefers-reduced-motion: reduce) {
	.cr-nosotros-founder__cta .elementor-button::before,
	.cr-nosotros-founder__cta a.elementor-button::before,
	.cr-nosotros-founder__cta .elementor-button-wrapper::before {
		animation: none;
	}
}