/**
 * Culture Racing — Footer
 *
 * Estilos del footer del sitio (info + menús + CTA AGENDAR + watermark +
 * copyright), montado desde Elementor con IDs/clases custom.
 *
 * Estructura del DOM (Elementor):
 *   #cr-site-footer
 *   ├── #cr-footer-row-1 (info + 3 menús + CTA)
 *   │   ├── .cr-footer-info     (redes + dirección + email + tel)
 *   │   ├── .cr-footer-col × 3  (Servicios, Comunidad, Contacto)
 *   │   └── .cr-footer-cta      (botón AGENDAR — absolute)
 *   ├── #cr-footer-row-2 (tagline + legal)
 *   ├── #cr-footer-brand (watermark CULTURE RACING)
 *   └── #cr-footer-copyright
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Footer root      → #cr-site-footer (bg, links globales, font-family)
 *   §2  Row-1 grid       → #cr-footer-row-1 (layout 5 columnas desktop)
 *   §3  Info column      → .cr-footer-info (socials + dirección + email + tel)
 *   §4  Menu columns     → .cr-footer-col (títulos + listas de links)
 *   §5  CTA AGENDAR      → .cr-footer-cta (botón absolute anclado a la derecha)
 *   §6  Row-2            → #cr-footer-row-2 (tagline + legal + línea separadora)
 *   §7  Brand watermark  → #cr-footer-brand
 *   §8  Copyright        → #cr-footer-copyright
 *   §9  Helpers tablet   → .cr-footer-logo-tablet / -tagline-tablet (hidden base)
 *   §10 Widget resets    → #cr-site-footer .elementor-widget-container
 *   §11 Responsive       → TODOS los @media de tamaño consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá:  1024 (tablet) · 640 (mobile) · 481–640 (mobile-mid)
 *   Desktop es la base (sin media query). En §11, de más ancho a más angosto:
 *   1024 → 640 → (481–640 ajuste fino del watermark). No hay medias de
 *   accesibilidad (prefers-reduced-motion / hover / print) en este archivo.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · FOOTER ROOT — #cr-site-footer
   ═══════════════════════════════════════════════════════════════════════ */

#cr-site-footer {
	position: relative;
	width: 100%;
	background-color: var(--cr-color-black);
	color: var(--cr-color-white);
	padding: 3rem 0 0 0;
	overflow: hidden;
}


#cr-footer-row-1 div.cr-footer-socials {
	text-align: start;
}

#cr-site-footer a {
	color: var(--e-global-color-text);
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
}

#cr-site-footer a:hover {
	color: var(--cr-color-primary);
}

/* Forzar Montserrat. Elementor inyecta tipografías por widget que
   ignoran herencia del body y caen al fallback Roboto. */
#cr-site-footer,
#cr-site-footer *,
#cr-site-footer p,
#cr-site-footer a,
#cr-site-footer span,
#cr-site-footer h1,
#cr-site-footer h2,
#cr-site-footer h3,
#cr-site-footer h4,
#cr-site-footer h5,
#cr-site-footer h6,
#cr-site-footer li,
#cr-site-footer button,
#cr-site-footer .elementor-heading-title,
#cr-site-footer .elementor-widget-text-editor p,
#cr-site-footer .elementor-widget-heading h1,
#cr-site-footer .elementor-widget-heading h2,
#cr-site-footer .elementor-widget-heading h3,
#cr-site-footer .elementor-widget-heading h4,
#cr-site-footer .elementor-widget-heading h5,
#cr-site-footer .elementor-widget-heading h6,
#cr-site-footer .elementor-widget-button .elementor-button,
#cr-site-footer .elementor-widget-button .elementor-button-text {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · ROW-1 GRID — #cr-footer-row-1
   ═══════════════════════════════════════════════════════════════════════ */

#cr-footer-row-1 {
	display: grid !important;
	grid-template-columns: 1.4fr 80px 1fr 1fr 1fr;
	gap: 40px;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto 3rem auto;
	padding: 0 var(--cr-container-pad);
	box-sizing: border-box;
	align-items: start;
	position: relative;
}

/* SERVICIOS salta el gutter (track 2) y arranca en el track 3.
   COMUNIDAD y CONTACTO siguen con auto-flow normal. */
#cr-footer-row-1 .cr-footer-info + .cr-footer-col {
	grid-column-start: 3;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · INFO COLUMN — .cr-footer-info (socials + dirección + email + tel)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-footer-info {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 1.6;
}

.cr-footer-socials {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	margin-bottom: 2rem !important;
}

#cr-site-footer .cr-footer-socials .elementor-social-icon,
#cr-site-footer .cr-footer-socials .elementor-icon,
#cr-site-footer .cr-footer-socials a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 45px !important;
	height: 45px !important;
	border: 1px solid #FFF;
	border-radius: 6rem !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--cr-color-black) !important;
	font-size: 22px !important;
	padding: 0 !important;
	transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease !important;
}

.cr-footer-socials .elementor-social-icons-wrapper {
	word-spacing: 0.6rem;
}

/* Forzar SVG blanco. Elementor aplica colores por red social
   (#e4405f IG, #ff0000 YT, etc.) que pisan el color del padre. */
.cr-footer-socials a svg,
.cr-footer-socials .elementor-social-icon svg,
.cr-footer-socials .elementor-icon svg,
.cr-footer-socials i {
	width: 22px !important;
	height: 22px !important;
	fill: #FFF !important;
	color: var(--cr-color-black) !important;
	transition: fill 0.35s ease;
}

/* Hover de social icons.
   Elementor inyecta background-color !important por red social (.elementor-social-icon-instagram,
   .elementor-social-icon-youtube, etc.). Para vencer esa especificidad, repetimos selectores
   con la clase específica de cada red. */
#cr-site-footer .cr-footer-socials .elementor-social-icon:hover,
#cr-site-footer .cr-footer-socials .elementor-icon:hover,
#cr-site-footer .cr-footer-socials a:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-instagram:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-youtube:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-spotify:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-tiktok:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-facebook:hover,
#cr-site-footer .cr-footer-socials .elementor-social-icon-twitter:hover {
	background: var(--cr-color-primary) !important;
	background-color: var(--cr-color-primary) !important;
	border-color: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(192, 0, 0, 0.35);
}

.cr-footer-socials a:hover svg,
.cr-footer-socials .elementor-social-icon:hover svg {
	fill: var(--cr-color-white) !important;
}

/* Dirección, email, teléfono */
.cr-footer-address,
.cr-footer-email,
.cr-footer-phone {
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	font-weight: 400;
}

.cr-footer-address {
	max-width: 220px;
}

.cr-footer-email a,
.cr-footer-phone a {
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.3s ease;
}

.cr-footer-email a:hover,
.cr-footer-phone a:hover {
	color: var(--cr-color-primary);
}

.cr-footer-address > p,
.cr-footer-email > p,
.cr-footer-phone > a {
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · MENU COLUMNS — .cr-footer-col (Servicios / Comunidad / Contacto)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-footer-col {
	display: flex !important;
	flex-direction: column;
	gap: 0px;
}

.cr-footer-col h1,
.cr-footer-col h2,
.cr-footer-col h3,
.cr-footer-col h4,
.cr-footer-col h5,
.cr-footer-col h6,
.cr-footer-col .elementor-heading-title,
.cr-footer-col .elementor-widget-heading .elementor-heading-title {
	color: var(--cr-color-white) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.2 !important;
}

.cr-footer-col ul,
.cr-footer-col .menu,
.cr-footer-col .elementor-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex !important;
	flex-direction: column;
}

.cr-footer-col li,
.cr-footer-col .menu-item {
	margin: 0;
	padding: 0;
}

#cr-site-footer .cr-footer-col a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	display: inline-block;
	transition: color 0.35s ease, transform 0.35s ease !important;
}

#cr-site-footer .cr-footer-col a:hover {
	color: var(--cr-color-primary);
	transform: translateX(6px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · CTA AGENDAR — .cr-footer-cta (botón absolute anclado a la derecha)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-footer-cta {
	/* Sacado del flujo del grid: anclado a la derecha del footer y
	   centrado verticalmente sobre la línea de row-2. */
	position: absolute !important;
	right: var(--cr-container-pad);
	bottom: -5.6rem;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	z-index: 10;
}

#cr-site-footer .cr-footer-cta .elementor-button,
#cr-site-footer .cr-footer-cta a.elementor-button-link,
#cr-site-footer .cr-footer-cta a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 14px 40px !important;
	background-color: var(--cr-color-white) !important;
	color: var(--cr-color-black) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 100px !important;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	line-height: 1;
	position: relative;
	z-index: 11;
	transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease !important;
}

.cr-footer-cta .elementor-button:hover,
.cr-footer-cta a.elementor-button-link:hover,
.cr-footer-cta a:hover {
	background-color: var(--cr-color-primary) !important;
	color: var(--cr-color-white) !important;
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(192, 0, 0, 0.4);
}

.cr-footer-cta .elementor-button-text {
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · ROW-2 — #cr-footer-row-2 (tagline + legal + línea separadora)
   ═══════════════════════════════════════════════════════════════════════ */

#cr-footer-row-2 {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: var(--cr-container-max);
	margin: 0 auto 50px auto;
	padding: 3rem var(--cr-container-pad) 0;
	box-sizing: border-box;
	position: relative;
}

/* Línea separadora superior. Se hace con ::before en lugar de
   border-top porque debe terminar antes del botón AGENDAR (que
   se superpone desde row-1) y un border-top siempre ocupa el
   100% del ancho del elemento.

   !important en todo el bloque porque Elementor define un ::before
   propio sobre .e-con (clase que tiene #cr-footer-row-2) con
   transitions y otras propiedades que pueden interferir. */
#cr-footer-row-2::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: var(--cr-container-pad) !important;
	right: calc(var(--cr-container-pad) + 10%) !important;
	width: auto !important;
	height: 1px !important;
	background-color: #FFF !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	pointer-events: none;
	padding-right: 2rem;
}

.cr-footer-tagline {
	flex: 1 1 auto;
	max-width: 460px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	font-weight: 400;
}

.cr-footer-tagline p,
.cr-footer-tagline .elementor-widget-container,
.cr-footer-tagline .elementor-widget-text-editor {
	color: var(--e-global-color-text);
	font-size: 15px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}


/* ── §6.1 · Legal (lista inline de enlaces legales) ────────────────────── */

.cr-footer-legal {
	display: block !important;
	max-width: 480px;
	margin-left: 2.6rem;
	margin-right: 0;
	text-align: right;
}

/* Lista en flujo inline (no flex) para que los items envuelvan como
   palabras de texto cuando no caben, en lugar de quedar uno por línea. */
.cr-footer-legal ul,
.cr-footer-legal .menu,
.cr-footer-legal .elementor-nav-menu,
.cr-footer-legal .zenth-fm-list {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	text-align: right;
	font-family: var(--cr-font-body) !important;
}

.cr-footer-legal ul li,
.cr-footer-legal .zenth-fm-list li,
.cr-footer-legal .menu li {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: none !important;
}

/* Separador "|" inline — fluye con el texto y respeta el wrap. */
.cr-footer-legal ul li:not(:last-child)::after,
.cr-footer-legal .zenth-fm-list li:not(:last-child)::after,
.cr-footer-legal .menu li:not(:last-child)::after {
	content: " | ";
	color: rgba(255, 255, 255, 0.4);
	margin: 0 6px;
	font-weight: 400;
	letter-spacing: 0;
}

.cr-footer-legal a {
	color: var(--e-global-color-text);
	font-family: var(--cr-font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	display: inline;
	transition: color 0.3s ease;
}

.cr-footer-legal a:hover {
	color: var(--cr-color-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · BRAND WATERMARK — #cr-footer-brand
   ═══════════════════════════════════════════════════════════════════════ */

#cr-footer-brand {
	position: relative;
	width: 100% !important;
	max-width: var(--cr-container-max);
	margin: auto !important;
	padding: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
	line-height: 0;
	min-height: 240px;
	display: flex !important;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

#cr-footer-brand > .elementor-element,
#cr-footer-brand .elementor-widget-image,
#cr-footer-brand .elementor-widget-container,
#cr-footer-brand .elementor-widget-image .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	line-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	position: relative;
	z-index: 0;
}

#cr-footer-brand img,
#cr-footer-brand .elementor-widget-image img,
#cr-footer-brand .elementor-widget-container img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	opacity: 0.22;
	filter: brightness(0) invert(1);
	pointer-events: none;
	user-select: none;
	object-fit: contain;
	object-position: bottom center;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · COPYRIGHT — #cr-footer-copyright
   ═══════════════════════════════════════════════════════════════════════ */

#cr-footer-copyright {
	width: 100%;
	padding: 120px var(--cr-container-pad) 32px;
	text-align: center;
	color: var(--cr-color-white);
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	position: relative;
	z-index: 3;
	/* Margin negativo: el copyright se monta sobre la parte inferior
	   del watermark cubriendo "RACING" sin tocar "CULTURE". */
	margin-top: -140px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, 0.3) 10%,
		rgba(0, 0, 0, 0.85) 47%,
		var(--cr-color-black) 100%
	);
	pointer-events: none;
}

#cr-footer-copyright > *,
#cr-footer-copyright p,
#cr-footer-copyright a {
	pointer-events: auto;
}

#cr-footer-copyright p,
#cr-footer-copyright .elementor-widget-container,
#cr-footer-copyright .elementor-widget-text-editor {
	color: var(--e-global-color-text);
	font-size: 18px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	text-align: center !important;
	position: relative;
	z-index: 2;
}

#cr-footer-copyright a {
	color: var(--cr-color-white);
	font-weight: 400;
	text-decoration: none;
	transition: color 0.3s ease;
}

#cr-footer-copyright a:hover {
	color: var(--cr-color-primary);
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · HELPERS TABLET — widgets exclusivos de tablet (ocultos en base)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-footer-logo-tablet,
.cr-footer-tagline-tablet {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · WIDGET RESETS — neutralizar padding/margin de wrappers Elementor
   ═══════════════════════════════════════════════════════════════════════ */

#cr-site-footer .elementor-widget-container {
	padding: 0;
	margin: 0;
}

#cr-site-footer .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · RESPONSIVE — todos los @media, de más ancho a más angosto
   ───────────────────────────────────────────────────────────────────────
   Tiers:  Tablet (≤1024) → Mobile (≤640) → ajuste fino (481–640)
   El cascade max-width va de mayor a menor; el rango 481–640 va al final
   porque solo afina la posición del watermark sin pisar layout general.
   ═══════════════════════════════════════════════════════════════════════ */

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

	/* §1 · Footer pasa a un grid de áreas (logo/info/legal/menús/brand/copy) */
	#cr-site-footer {
		display: grid !important;
		position: relative;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"logo   info    info"
			"tag    info    info"
			"legal  legal   legal"
			"line   line    line"
			"menu1  menu2   menu3"
			"brand  brand   brand"
			"copy   copy    copy";
		column-gap: 32px;
		row-gap: 24px;
		padding: 4rem var(--cr-container-pad) 0;
	}

	/* §2/§6 · Los rows se hacen transparentes al layout. Sus hijos heredan
	   el grid del footer y se posicionan por grid-area abajo. */
	#cr-footer-row-1,
	#cr-footer-row-2 {
		display: contents !important;
	}

	/* §9 · Logo + tagline en tablet (widgets exclusivos) */
	.cr-footer-logo-tablet {
		display: block !important;
		grid-area: logo;
		max-width: 220px;
		align-self: start;
	}

	.cr-footer-logo-tablet img {
		width: 100%;
		height: auto;
		display: block;
	}

	.cr-footer-tagline-tablet {
		display: block !important;
		grid-area: tag;
		max-width: 360px;
		color: rgba(255, 255, 255, 0.85);
		font-size: 15px;
		line-height: 1.55;
		margin: 0 0 1rem 0 !important;
	}

	.cr-footer-tagline-tablet p,
	.cr-footer-tagline-tablet .elementor-widget-container {
		color: var(--e-global-color-text);
		font-size: 15px !important;
		line-height: 1.55 !important;
		margin: 0 !important;
	}

	/* §3 · Info: socials + dirección + email + tel a la derecha */
	.cr-footer-info {
		grid-area: info;
		align-items: flex-end;
		text-align: right;
	}

	.cr-footer-socials {
		justify-content: flex-end;
		margin-bottom: 1.5rem !important;
	}

	.cr-footer-address,
	.cr-footer-email,
	.cr-footer-phone {
		text-align: right;
		max-width: none;
	}

	/* §6 · Legales: a la izquierda, arriba de la línea */
	.cr-footer-legal {
		grid-area: legal;
		text-align: left !important;
		margin: 1rem 0 0 0 !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.cr-footer-legal ul,
	.cr-footer-legal .menu,
	.cr-footer-legal .zenth-fm-list {
		text-align: left !important;
	}

	/* §6 · Línea separadora con hueco para AGENDAR.
	   Como #cr-footer-row-2 tiene display: contents, su ::before
	   original no se renderiza. Creamos la línea como una "fila"
	   del grid (área "line") y le damos un ::after al footer
	   posicionado sobre esa fila. */
	#cr-site-footer::after {
		content: "";
		grid-area: line;
		display: block;
		height: 1px;
		background-color: #FFF;
		/* La línea termina antes del botón AGENDAR. El botón está
		   alineado a la derecha y mide ~140px. Reservamos 180px. */
		margin-right: 180px;
		align-self: center;
	}

	/* §6 · Cancelar la línea de desktop (::before de row-2) — el row tiene
	   display: contents y su ::before no se rendea, pero por si acaso. */
	#cr-footer-row-2::before {
		display: none !important;
	}

	/* §5 · Botón AGENDAR: absoluto, anclado a la derecha sobre la línea */
	.cr-footer-cta {
		grid-area: line;
		position: relative !important;
		right: auto;
		bottom: auto;
		top: auto;
		justify-self: end;
		align-self: center;
		margin: 0 !important;
		padding: 0 !important;
		width: auto !important;
		z-index: 10;
	}

	/* §4 · Las 3 columnas de menú lado a lado.
	   Selector :nth-of-type cuenta divs hermanos en el DOM real,
	   no afectado por display: contents del padre. */
	#cr-footer-row-1 .cr-footer-col:nth-of-type(1) {
		grid-area: menu1;
	}

	#cr-footer-row-1 .cr-footer-col:nth-of-type(2) {
		grid-area: menu2;
	}

	#cr-footer-row-1 .cr-footer-col:nth-of-type(3) {
		grid-area: menu3;
	}

	/* §2 · Cancelar el grid-column-start: 3 que tiene en desktop. */
	#cr-footer-row-1 .cr-footer-info + .cr-footer-col {
		grid-column-start: auto;
	}

	/* §7 · Watermark — rompe el padding lateral del footer */
	#cr-footer-brand {
		grid-area: brand;
		min-height: 140px;
		margin-top: 2rem !important;
		/* Romper el padding lateral del footer para que el watermark
		   se extienda hasta los bordes reales del viewport. El padding
		   lo aplicamos en #cr-site-footer en tablet, así que acá lo
		   compensamos con margin negativo equivalente. */
		margin-left: calc(var(--cr-container-pad) * -1) !important;
		margin-right: calc(var(--cr-container-pad) * -1) !important;
		width: calc(100% + (var(--cr-container-pad) * 2)) !important;
		max-width: none !important;
	}

	/* §8 · Copyright — rompe el padding para no recortar el gradiente */
	#cr-footer-copyright {
		grid-area: copy;
		/* El copyright también debe romper el padding del footer porque
		   tiene un gradiente que se monta sobre el watermark. Si no se
		   extiende a los bordes, el gradiente queda recortado. */
		margin-left: calc(var(--cr-container-pad) * -1) !important;
		margin-right: calc(var(--cr-container-pad) * -1) !important;
		width: calc(100% + (var(--cr-container-pad) * 2)) !important;
	}

	/* §6 · Tagline original de row-2 oculto en tablet (lo reemplaza el
	   cr-footer-tagline-tablet posicionado junto al logo). */
	.cr-footer-tagline {
		display: none !important;
	}
}


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

	/* §1 · Footer pasa a una sola columna apilada */
	#cr-site-footer {
		grid-template-columns: 1fr;
		grid-template-areas:
			"logo"
			"tag"
			"info"
			"line"
			"menu1"
			"menu2"
			"menu3"
			"line2"
			"legal"
			"brand"
			"copy";
		row-gap: 0;
		padding-top: 3rem;
	}

	/* §3 · En mobile la info pasa a alineación izquierda (la derecha
	   se ve apretada en pantallas tan angostas). Gap interno más
	   chico que el default para que socials, dirección, email y
	   teléfono se sientan agrupados como un bloque, no items
	   sueltos. */
	.cr-footer-info {
	    padding: 0;
		align-items: flex-start;
		text-align: left;
		gap: 0px;
	}

	/* §9 · Logo tablet más chico en mobile */
    .cr-footer-logo-tablet {
        width: 55%;
        max-width: 16rem !important;
        margin-bottom: 2rem !important;
    }

	.cr-footer-tagline-tablet p, .cr-footer-tagline-tablet .elementor-widget-container {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}

	/* §3 · Social icons un poco más chicos */
    #cr-site-footer .cr-footer-socials .elementor-social-icon,
    #cr-site-footer .cr-footer-socials .elementor-icon,
    #cr-site-footer .cr-footer-socials a {
        width: 2.6rem !important;
        height: 2.6rem !important;
    }

	.cr-footer-socials {
		justify-content: flex-start;
		gap: 12px;
		margin-top: 4px !important;
	}

	.cr-footer-address,
	.cr-footer-email,
	.cr-footer-phone {
		text-align: left;
	}

	.cr-footer-tagline-tablet {
		max-width: none;
	}

	/* §4 · Títulos de columna de menú */
	.cr-footer-col h1,
	.cr-footer-col h2,
	.cr-footer-col h3,
	.cr-footer-col h4,
	.cr-footer-col h5,
	.cr-footer-col h6,
	.cr-footer-col .elementor-heading-title {
		font-size: 14px !important;
		letter-spacing: 1.2px !important;
		margin-bottom: 12px !important;
	}

    .cr-footer-col {
        padding: 0;
        margin-bottom: 2.2rem;
    }

	#cr-site-footer .cr-footer-col a {
		font-size: 14px;
	}

	/* §6 · Legales en mobile */
    .cr-footer-legal {
        margin: 1rem 0 1rem 0 !important;
    }

	/* §6 · En mobile los legales se distribuyen en una cuadrícula 2×2.
	   Cuatro items en dos columnas iguales. Sin separadores "|"
	   porque el grid ya organiza visualmente los items. */
	.cr-footer-legal ul,
	.cr-footer-legal .menu,
	.cr-footer-legal .zenth-fm-list {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
		line-height: 1.4;
	}

	.cr-footer-legal ul li,
	.cr-footer-legal .zenth-fm-list li,
	.cr-footer-legal .menu li {
		display: block !important;
	}

	/* §6 · Ocultar los separadores "|" — el grid los reemplaza. */
	.cr-footer-legal ul li:not(:last-child)::after,
	.cr-footer-legal .zenth-fm-list li:not(:last-child)::after,
	.cr-footer-legal .menu li:not(:last-child)::after {
		content: none;
	}

	.cr-footer-legal a,
	.cr-footer-legal li {
		font-size: 10px !important;
	}

	/* §5 · CTA AGENDAR más compacto */
	.cr-footer-cta .elementor-button,
	.cr-footer-cta a.elementor-button-link,
	.cr-footer-cta a {
		padding: 12px 28px !important;
		font-size: 13px !important;
	}

	/* §7 · Watermark CULTURE RACING como textura decorativa detrás de los
	   menús. Position absolute sobre el footer (que ya es relative),
	   recortado por overflow: hidden del padre.

	   Usamos valores absolutos en lugar de % para que sea predecible:
	   - top: distancia desde arriba del footer hasta donde empieza
	     la imagen del watermark.
	   - width fijo en px para que el alto sea predecible (la altura
	     del SVG es proporcional al ancho). */
	#cr-footer-brand {
		display: block !important;
		position: absolute !important;
		top: -27rem;
		right: -1070px;
		left: auto;
		bottom: auto;
		width: 80rem !important;
		max-width: none !important;
		min-height: 0 !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		pointer-events: none;
		z-index: 0;
		overflow: visible;
	}

	#cr-footer-brand img,
	#cr-footer-brand .elementor-widget-image img,
	#cr-footer-brand .elementor-widget-container img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		opacity: 0.08 !important;
		filter: brightness(0) invert(1);
	}

	/* §4 · Los menús y demás contenido deben quedar por encima del watermark. */
	#cr-footer-row-1 .cr-footer-col {
		position: relative;
		z-index: 1;
	}

	/* §8 · Copyright vuelve a flujo normal (sin gradiente) */
	#cr-footer-copyright {
		font-size: 14px;
		/* Sin watermark debajo, el copyright vuelve a flujo normal:
		   sin solapamiento, sin gradient, con una línea fina arriba
		   como cierre visual. Rompe el padding lateral del footer
		   para que el border-top llegue a los bordes del viewport. */
		padding: 18px 16px 24px;
		margin-top: 0 !important;
		margin-left: calc(var(--cr-container-pad) * -1) !important;
		margin-right: calc(var(--cr-container-pad) * -1) !important;
		width: calc(100% + (var(--cr-container-pad) * 2)) !important;
		min-height: 0 !important;
		height: auto !important;
		background: transparent !important;
		border-top: 0.5px solid rgba(255, 255, 255, 0.15);
		text-align: center !important;
	}

	/* §5 · CTA AGENDAR (override más específico, padding aún más chico) */
    #cr-site-footer .cr-footer-cta .elementor-button,
    #cr-site-footer .cr-footer-cta a.elementor-button-link,
    #cr-site-footer .cr-footer-cta a {
        padding: 10px 30px !important;
        font-size: 13px !important;
    }

	#cr-footer-copyright p,
	#cr-footer-copyright .elementor-widget-container,
	#cr-footer-copyright .elementor-widget-text-editor {
		text-align: center !important;
	}

	.cr-footer-address,
	.cr-footer-email,
	.cr-footer-phone,
	.cr-footer-info {
		font-size: 14px;
	}

	/* §8 · Copyright alineado a la izquierda (override del center de arriba) */
    #cr-footer-copyright p,
    #cr-footer-copyright .elementor-widget-container,
    #cr-footer-copyright .elementor-widget-text-editor {
        text-align: start !important;
        font-size: 13px !important;
    }

	/* §6 · En mobile el botón AGENDAR ya no flota — pasa al flujo normal
	   de su área. La línea ocupa todo el ancho. */
	#cr-site-footer::after {
		margin-right: 0;
		margin: 2.4rem 0 2.4rem 0;
	}

	/* §6 · Segunda línea separadora: entre el último menú (Contacto) y
	   los legales. Misma estética sutil que el border-top del
	   copyright, no compite visualmente. Rompe el padding lateral
	   del footer para extenderse hasta los bordes del viewport. */
	#cr-site-footer::before {
		content: "";
		grid-area: line2;
		display: block;
		height: 1px;
		background-color: rgba(255, 255, 255, 0.15);
		align-self: center;
		justify-self: stretch;
		width: calc(100% + (var(--cr-container-pad) * 2));
		margin-left: calc(var(--cr-container-pad) * -1);
		margin-right: calc(var(--cr-container-pad) * -1);
	}

	.cr-footer-cta {
		justify-self: end;
		justify-content: flex-end;
	}
}


/* ──────────────── MOBILE-MID · 481–640px (ajuste del watermark) ───────── */
@media (min-width: 481px) and (max-width: 640px) {

	/* §7 · Reposiciona el watermark para el rango medio de mobile */
	#cr-footer-brand {
		top: -27rem;
		right: -930px;
		width: 75rem !important;
	}
}