/**
 * Culture Racing — Página /contacto/
 *
 * Sólo se carga cuando estamos en la página de contacto (detectado por
 * slug en functions.php). No usar variables específicas de esta página
 * en otras: si necesitás algo reusable, sube a global.css.
 *
 * Estructura del hero:
 *   1. Status Bar (zenth_business_status_bar)
 *   2. Heading dual "PONTE EN / CONTACTO" (cr-section-title + outline--red)
 *   3. Texto bajada (Elementor heading o text editor)
 *   4. 3 cards (whatsapp, mapa, formulario)
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Tokens de página   → .cr-contact-page (variables locales de la página)
 *   §2  Hero               → .cr-contact-hero (intro, título, lead, grid cards)
 *   §3  Status bar         → .cr-status-bar (+ keyframe cr-status-pulse)
 *   §4  Cards — base       → .cr-contact-card (preview, footer, icon, cta)
 *   §5  Card WhatsApp      → .cr-wa-chat (chat mock dentro de la card)
 *   §6  Card Mapa          → .cr-map-preview (+ keyframe cr-map-tag-pulse)
 *   §7  Card Formulario    → .cr-form-preview (mock visual del form)
 *   §8  Divider checker    → .cr-divider-checker-top (+ keyframe cr-checker-scroll)
 *   §9  Mensaje            → .cr-contact-message (grid, eyebrow, título, card, features)
 *   §10 Formulario real    → .cr-contact-form (campos, submit, feedback, success)
 *   §11 Visita + CTA final → .cr-visit__info / .cr-contact-cta / .cr-dual-btn
 *   §12 Responsive         → TODOS los @media consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS usados acá (desktop es la base, sin media query)
 *   1024 tablet · 767 mobile · 480 mobile-small
 *
 *   Todos los @media de TAMAÑO viven en §12, ordenados de más ancho a más
 *   angosto (1024 → 767 → 480) para que el cascade sea claro. Al final,
 *   subsección de ACCESIBILIDAD (prefers-reduced-motion ×2), que NO es un
 *   breakpoint de tamaño y no se consolida con los de arriba.
 * ─────────────────────────────────────────────────────────────────────────
 * @version 1.0.0
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · TOKENS DE PÁGINA
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-page {
	--cr-contact-card-bg: #161616;
	--cr-contact-card-border: rgba(255, 255, 255, 0.06);
	--cr-contact-card-radius: 14px;
	--cr-contact-card-pad: 24px;
	--cr-contact-card-gap: 24px;
	--cr-contact-status-success: #25d366;
	--cr-contact-status-success-bg: rgba(37, 211, 102, 0.12);
	--cr-contact-status-closed: #888888;
	--cr-contact-status-closed-bg: rgba(140, 140, 140, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · HERO
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-page .cr-contact-hero,
.cr-contact-page .cr-contact-hero.e-con,
.cr-contact-page .cr-contact-hero.elementor-section {
	background: var(--cr-color-black) !important;
	padding: 2.2rem 0 80px !important;
}

/* Inner section centrada con el contenido del hero (status bar +
   título + bajada). Aplicar clase `cr-contact-hero__intro` al inner. */
.cr-contact-page .cr-contact-hero__intro,
.cr-contact-page .cr-contact-hero__intro.e-con-inner {
	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;
	align-items: center !important;
	gap: 0px !important;
	text-align: center !important;
}

.cr-contact-page .cr-section-title .elementor-heading-title {
    margin: 2rem 0 4rem 0 !important;
    font-size: clamp(1rem, 6vw, 62px) !important;
}

.cr-contact-hero__intro .cr-section-title span {
    font-size: clamp(2rem, 8vw, 82px) !important;
}

/* Bajada del hero ("¿Tienes un proyecto en mente?...").
   Aplicar clase `cr-contact-hero__lead` al widget Heading o Text Editor. */
.cr-contact-page .cr-contact-hero__lead,
.cr-contact-page .cr-contact-hero__lead .elementor-heading-title,
.cr-contact-page .cr-contact-hero__lead .elementor-widget-container,
.cr-contact-page .cr-contact-hero__lead p {
	color: rgba(255, 255, 255, 0.75) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(16px, 1.6vw, 20px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	max-width: 640px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

/* Grid de las 3 cards. Aplicar `cr-contact-cards` al inner section
   que las contiene. Maneja el grid de 3 columnas en desktop y el
   stack vertical en mobile. */
.cr-contact-page .cr-contact-cards,
.cr-contact-page .cr-contact-cards.e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--cr-contact-card-gap) !important;
	max-width: var(--cr-container-max) !important;
	margin: 56px auto 0 !important;
	padding: 0 var(--cr-container-pad) !important;
	align-items: stretch !important;
}

/* Resetear cualquier padding/margin que Elementor pueda inyectar en
   los hijos directos del grid (las columnas que envuelven cada widget). */
.cr-contact-page .cr-contact-cards > .elementor-column,
.cr-contact-page .cr-contact-cards > .e-con,
.cr-contact-page .cr-contact-cards > .elementor-element {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · STATUS BAR
   ═══════════════════════════════════════════════════════════════════════ */

.cr-status-bar {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--cr-color-black);
	border: 1px solid var(--cr-color-gray-800);
	color: var(--cr-color-white);
	font-family: var(--cr-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1;
}

.cr-status-bar__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color var(--cr-transition-base),
				box-shadow var(--cr-transition-base);
}

.cr-status-bar[data-cr-status-state="open"] .cr-status-bar__dot {
	background: var(--cr-contact-status-success);
	box-shadow: 0 0 0 4px var(--cr-contact-status-success-bg);
	animation: cr-status-pulse 2.4s ease-in-out infinite;
}

.cr-status-bar[data-cr-status-state="closed"] .cr-status-bar__dot {
	background: var(--cr-contact-status-closed);
	box-shadow: 0 0 0 4px var(--cr-contact-status-closed-bg);
}

@keyframes cr-status-pulse {
	0%, 100% { box-shadow: 0 0 0 4px var(--cr-contact-status-success-bg); }
	50%      { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.04); }
}

.cr-status-bar__text {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.cr-status-bar__sep {
	opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · CARDS — BASE
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-card {
	display: flex;
	flex-direction: column;
	background: var(--cr-contact-card-bg);
	border: 1px solid var(--cr-contact-card-border);
	border-radius: var(--cr-contact-card-radius);
	overflow: hidden;
	height: 100%;
	color: var(--cr-color-white);
	font-family: var(--cr-font-body);
}

.cr-contact-card__preview {
	padding: var(--cr-contact-card-pad);
	flex-grow: 1;
	min-height: 240px;
	display: flex;
	flex-direction: column;
}

.cr-contact-card__footer {
	background: var(--cr-color-darker);
	padding: 22px var(--cr-contact-card-pad);
	border-top: 1px solid var(--cr-contact-card-border);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon heading"
		"copy copy"
		"cta  cta";
	gap: 6px 14px;
	align-items: center;
}

.cr-contact-card__icon {
	grid-area: icon;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cr-color-primary);
	color: var(--cr-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cr-contact-card__heading-block {
	grid-area: heading;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cr-contact-card__heading {
	font-family: var(--cr-font-display);
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--cr-color-white);
}

.cr-contact-card__sub {
	font-size: 12px;
	color: var(--cr-color-gray-400);
	letter-spacing: 0.3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cr-contact-card__copy {
	grid-area: copy;
	font-size: 13px;
	color: var(--cr-color-gray-400);
	line-height: 1.5;
	margin: 14px 0 6px;
}

.cr-contact-card__cta {
	grid-area: cta;
	display: block;
	background: var(--cr-color-primary);
	color: var(--cr-color-white) !important;
	text-align: center;
	padding: 14px 20px;
	font-family: var(--cr-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 6px;
	margin-top: 10px;
	transition: background-color var(--cr-transition-fast);
}

.cr-contact-card__cta:hover,
.cr-contact-card__cta:focus-visible {
	background: var(--cr-color-primary-hover);
	outline: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · CARD WHATSAPP
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-card--whatsapp .cr-contact-card__preview {
	border-radius: var(--cr-contact-card-radius) var(--cr-contact-card-radius) 0 0;
	padding: 20px;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%),
		linear-gradient(160deg, rgba(232, 0, 29, 0.18) 0%, transparent 50%),
		linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}

.cr-wa-chat {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-grow: 1;
}

.cr-wa-chat__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	/* Border-bottom semitransparente para que funcione sobre el fondo con glow */
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cr-wa-chat__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cr-color-primary);
	color: var(--cr-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden; /* Para que img con border-radius del padre se recorte circular */
}

/* Cuando el avatar contiene una imagen (site icon / favicon de WP), llena
   el círculo completo con object-fit: cover. El background rojo del padre
   actúa como fallback si la imagen falla en cargar. */
.cr-wa-chat__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cr-wa-chat__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cr-wa-chat__name {
	font-weight: 700;
	font-size: 14px;
	color: var(--cr-color-white);
}

.cr-wa-chat__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

.cr-wa-chat__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

/* Dot verde cuando está abierto: convención universal "en línea/disponible".
   Lo mantenemos verde a propósito — no es identidad WhatsApp sino lenguaje
   de estado online estándar (Slack, Discord, Teams, etc). */
.cr-wa-chat__status--open .cr-wa-chat__status-dot {
	background: var(--cr-contact-status-success);
}

.cr-wa-chat__status--closed .cr-wa-chat__status-dot {
	background: var(--cr-contact-status-closed);
}

.cr-wa-chat__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Burbujas con lenguaje CR: bordes redondeados uniformes (sin "colita"
   de WhatsApp), border-radius parejo. Padding bottom mayor para que el
   timestamp absolute-positioned no se monte sobre el texto. */
.cr-wa-chat__bubble {
	max-width: 78%;
	padding: 10px 14px 20px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.4;
	position: relative;
	border: 1px solid transparent;
}

/* Saliente (cliente) — alineada a la derecha. Mismo lenguaje que los
   "inputs" activos del form: border rojo sutil + fill rojo translúcido + texto blanco */
.cr-wa-chat__bubble--sent {
	align-self: flex-end;
	background: rgba(232, 0, 29, 0.08);
	border-color: rgba(232, 0, 29, 0.45);
	color: var(--cr-color-white);
}

/* Recibida (CR responde) — alineada a la izquierda. Lenguaje neutro pero
   con contraste claro: fill blanco translúcido + border blanco sutil + texto blanco */
.cr-wa-chat__bubble--received {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--cr-color-white);
}

.cr-wa-chat__time {
	position: absolute;
	bottom: 4px;
	right: 10px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · CARD MAPA
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-card--map .cr-contact-card__preview {
	padding: 20px;
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%),
		linear-gradient(160deg, rgba(232, 0, 29, 0.18) 0%, transparent 50%),
		linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%) !important;
	border-radius: var(--cr-contact-card-radius) var(--cr-contact-card-radius) 0 0;
}

.cr-map-preview {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(232, 0, 29, 0.18);
	background: rgba(0, 0, 0, 0.35);
}

.cr-map-preview__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 220px;
	filter: saturate(0.85) brightness(0.92) contrast(1.05);
	/* Zoom provisional para que el pin destaque sin generar imagen nueva.
	   transform-origin apunta al pin (no al centro geométrico) para que el
	   pin quede centrado en el viewport visible tras el escalado.
	   Reemplazar por imagen con zoom nativo cuando se genere via Mapbox/Static Maps. */
	transform: scale(2.6);
	transform-origin: 50% 52%;
}

.cr-map-preview__placeholder {
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: repeating-linear-gradient(
		45deg,
		var(--cr-color-gray-900),
		var(--cr-color-gray-900) 10px,
		var(--cr-color-gray-800) 10px,
		var(--cr-color-gray-800) 20px
	);
}

/* Status pill estilo CR: transparente con borde + dot, no saturada */
.cr-map-preview__tag {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	font-family: var(--cr-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-color-white);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: border-color var(--cr-transition-base), color var(--cr-transition-base);
}

.cr-map-preview__tag--open {
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.45);
}

.cr-map-preview__tag--closed {
	color: rgba(255, 255, 255, 0.55);
	border-color: rgba(255, 255, 255, 0.18);
}

.cr-map-preview__tag-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.cr-map-preview__tag--open .cr-map-preview__tag-dot {
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
	animation: cr-map-tag-pulse 1.6s ease-in-out infinite;
}

@keyframes cr-map-tag-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Address: eyebrow rojo sutil estilo CR (no pill display negra) */
.cr-map-preview__address {
	position: absolute;
	bottom: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.65);
	border: 1px solid rgba(232, 0, 29, 0.35);
	border-radius: 999px;
	font-family: var(--cr-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cr-color-primary);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · CARD FORMULARIO (mock visual)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-card--form .cr-contact-card__preview {
	gap: 12px;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%),
		linear-gradient(160deg, rgba(232, 0, 29, 0.18) 0%, transparent 50%),
		linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}

.cr-form-preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.cr-form-preview__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cr-form-preview__row--split {
	flex-direction: row;
	gap: 10px;
}

.cr-form-preview__row--split .cr-form-preview__field {
	flex: 1;
	min-width: 0;
}

.cr-form-preview__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cr-form-preview__field--message {
	flex-grow: 1;
}

.cr-form-preview__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--cr-color-gray-400);
}

/* Los inputs del preview NO son inputs reales (es un mock visual).
   Background semitransparente claro + border y fill light-red para
   sugerir "este campo está activo/lleno". Marca de identidad CR sin
   competir con el form real de la sección siguiente. */
.cr-form-preview__value {
	background: rgba(232, 0, 29, 0.05) !important;
	border: 1px solid rgba(232, 0, 29, 0.45) !important;
	border-radius: 6px;
	padding: 9px 11px;
	font-size: 12px;
	color: var(--cr-color-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cr-form-preview__field--message .cr-form-preview__value {
	min-height: 56px;
	white-space: normal;
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · DIVIDER CHECKER (banda damero + franja roja)
   ═══════════════════════════════════════════════════════════════════════ */

.cr-divider-checker-top {
	position: relative !important;
	padding-top: 100px !important; /* 24 banda + 76 franja roja */
	overflow: hidden; /* Evita scroll horizontal si el viewport calc falla */
}

.cr-divider-checker-top::before,
.cr-divider-checker-top::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0; /* Detrás del contenido de la sección */
}

/* Banda con cuadrados (arriba del todo).
   Animación con transform: GPU-accelerated, 60fps garantizado, sin repaints.
   El ::before es contenedor estático (centra el patrón); su hijo virtual
   es un wrapper interno que sí se anima horizontalmente.
   Como no podemos crear hijos de un pseudo, usamos un truco: el ::before
   se hace 200% del ancho del viewport (con dos patrones repetidos lado a
   lado) y se anima translate3d de 0 a -50% del propio ancho. Como ambas
   mitades son idénticas, el loop es invisible. */
.cr-divider-checker-top::before {
	top: 0;
	height: 24px;
	left: 0;
	width: 200vw;
	transform: translate3d(0, 0, 0);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect width='24' height='24' fill='%23000'/><rect width='12' height='12' fill='%23fff'/><rect x='12' y='12' width='12' height='12' fill='%23fff'/></svg>");
	background-size: 24px 24px;
	background-repeat: repeat;
	background-color: var(--cr-color-black);
	animation: cr-checker-scroll 12s linear infinite;
	will-change: transform;
}

@keyframes cr-checker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Franja roja (debajo de la banda, encima del contenido) */
.cr-divider-checker-top::after {
	top: 24px;
	height: 76px;
	background: var(--cr-color-primary);
}

/* Asegurar que el contenido de la sección con divider esté por encima
   de los pseudo-elementos. Necesario porque el padding-top crea espacio
   para los pseudos, pero los hijos directos podrían quedar visualmente
   debajo si tienen z-index bajo. */
.cr-divider-checker-top > * {
	position: relative;
	z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · MENSAJE (sección "cuéntanos tu proyecto")
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-page .cr-contact-message,
.cr-contact-page .cr-contact-message.e-con {
	background: var(--cr-color-black) !important;
	padding: 96px 0 !important;
}

/* Cuando la sección combina `cr-contact-message` con `cr-divider-checker-top`,
   el padding-top necesita acomodar AMBAS cosas:
   - El divider (100px: 24 banda + 76 franja roja)
   - El espacio respiratorio de la sección (96px)
   Sin esto, el padding-top: 96px de cr-contact-message gana por especificidad
   sobre el padding-top: 100px del divider, y el contenido queda tapado. */
.cr-contact-page .cr-contact-message.cr-divider-checker-top,
.cr-contact-page .cr-contact-message.cr-divider-checker-top.e-con {
	padding-top: 196px !important; /* 100 divider + 96 respiro */
}

/* Inner section: grid 2 columnas iguales. Aplicar `cr-contact-message__grid` */
.cr-contact-page .cr-contact-message__grid,
.cr-contact-page .cr-contact-message__grid.e-con-inner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 64px !important;
	max-width: var(--cr-container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--cr-container-pad) !important;
	align-items: start !important;
}

/* Reset de columnas hijas para que ocupen su celda completa */
.cr-contact-page .cr-contact-message__grid > .elementor-column,
.cr-contact-page .cr-contact-message__grid > .e-con,
.cr-contact-page .cr-contact-message__grid > .elementor-element {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Eyebrow rojo arriba del título. Aplicar `cr-contact-message__eyebrow`
   a un widget Heading o Text Editor. */
.cr-contact-page .cr-contact-message__eyebrow,
.cr-contact-page .cr-contact-message__eyebrow .elementor-heading-title,
.cr-contact-page .cr-contact-message__eyebrow .elementor-widget-container,
.cr-contact-page .cr-contact-message__eyebrow p {
	color: var(--cr-color-primary) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	margin: 0 0 16px 0 !important;
	text-align: left !important;
	line-height: 1 !important;
}

/* El título principal usa el sistema existente `cr-section-title` +
   `cr-section-title__outline` (blanco esta vez). Sobreescribimos solo
   el text-align y margin para esta sección puntual. Aplicar `cr-contact-message__title`
   junto con `cr-section-title`.

   Reducimos también el font-size porque el cr-section-title base usa
   clamp(48px, 8vw, 96px) pensado para títulos a ancho completo. Acá
   vive en una columna del 50% del max-width, así que un 96px se desborda
   horizontalmente y se monta sobre la columna del form. */
.cr-contact-page .cr-contact-message__title,
.cr-contact-page .cr-contact-message__title .elementor-heading-title,
.cr-contact-page .cr-contact-message__title .elementor-widget-container {
	text-align: left !important;
	margin: 0 0 40px 0 !important;
	font-size: clamp(36px, 4.5vw, 64px) !important;
}

/* Card roja con features. Aplicar `cr-contact-message__card` a un inner
   section que contiene los 4 widgets Icon Box (uno por feature). */
.cr-contact-page .cr-contact-message__card,
.cr-contact-page .cr-contact-message__card.e-con,
.cr-contact-page .cr-contact-message__card.e-con-inner {
	background: var(--cr-color-primary) !important;
	border-radius: 16px !important;
	padding: 32px !important;
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

/* Textura graffiti como overlay sutil en la card. */
.cr-contact-page .cr-contact-message__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--cr-texture-url, url('../img/texture-concrete.webp'));
	background-size: var(--cr-texture-size-small, 180px 180px);
	background-repeat: repeat;
	opacity: 0.15;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 0;
}

/* Cualquier hijo directo debe estar encima de la textura */
.cr-contact-page .cr-contact-message__card > * {
	position: relative;
	z-index: 1;
}

/* Estilos para cada item Icon Box dentro de la card. Aplicar
   `cr-contact-message__feature` a cada widget Icon Box. */
.cr-contact-page .cr-contact-message__feature {
	margin: 0 !important;
	padding: 0 !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 16px !important;
	text-align: left !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon-box-icon {
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: var(--cr-color-white) !important;
	color: var(--cr-color-primary) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	padding: 0 !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon svg {
	width: 20px !important;
	height: 20px !important;
	fill: currentColor !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon-box-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon-box-title,
.cr-contact-page .cr-contact-message__feature .elementor-icon-box-title a {
	color: var(--cr-color-white) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

.cr-contact-page .cr-contact-message__feature .elementor-icon-box-description {
	color: rgba(255, 255, 255, 0.85) !important;
	font-family: var(--cr-font-body) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · FORMULARIO REAL
   ═══════════════════════════════════════════════════════════════════════ */

.cr-contact-page .cr-contact-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: var(--cr-font-body);
	/* Scroll-margin: cuando el CTA "LLENAR FORMULARIO" del hero hace
	   anchor scroll a #cr-contact-form, el header sticky no debe tapar
	   el inicio del form. Compensamos con la altura total del header. */
	scroll-margin-top: calc(var(--cr-header-total-height, 100px) + 20px);
}

.cr-contact-page .cr-contact-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.elementor-element.elementor-element-8022827.e-con-full.e-flex.e-con.e-child {
    height: 100%;
    justify-content: center;
}

.cr-contact-page .cr-contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cr-contact-page .cr-contact-form__row--split {
	flex-direction: row;
	gap: 20px;
}

.cr-contact-page .cr-contact-form__row--split .cr-contact-form__field {
	flex: 1;
	min-width: 0;
}

.cr-contact-page .cr-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cr-contact-page .cr-contact-form__label {
	color: var(--cr-color-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
}

.cr-contact-page .cr-contact-form__required {
	color: var(--cr-color-primary);
	margin-left: 2px;
}

.cr-contact-page .cr-contact-form__input,
.cr-contact-page .cr-contact-form__select,
.cr-contact-page .cr-contact-form__textarea {
	background: var(--cr-color-gray-900);
	border: 1px solid var(--cr-color-gray-800);
	border-radius: 6px;
	padding: 14px 16px;
	color: var(--cr-color-white);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--cr-transition-fast),
				box-shadow var(--cr-transition-fast);
}

.cr-contact-page .cr-contact-form__input::placeholder,
.cr-contact-page .cr-contact-form__textarea::placeholder {
	color: var(--cr-color-gray-400);
	opacity: 1;
}

.cr-contact-page .cr-contact-form__input:focus,
.cr-contact-page .cr-contact-form__select:focus,
.cr-contact-page .cr-contact-form__textarea:focus {
	outline: 0;
	border-color: var(--cr-color-primary);
	box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.18);
}

.cr-contact-page .cr-contact-form__textarea {
	min-height: 140px;
	resize: vertical;
}

/* Select chevron custom (sobreescribir flecha nativa del browser) */
.cr-contact-page .cr-contact-form__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.cr-contact-page .cr-contact-form__select option {
	background: var(--cr-color-gray-900);
	color: var(--cr-color-white);
}

/* Error state por campo */
.cr-contact-page .cr-contact-form__field.has-error .cr-contact-form__input,
.cr-contact-page .cr-contact-form__field.has-error .cr-contact-form__select,
.cr-contact-page .cr-contact-form__field.has-error .cr-contact-form__textarea {
	border-color: var(--cr-color-primary);
}

.cr-contact-page .cr-contact-form__error {
	display: none;
	color: var(--cr-color-primary);
	font-size: 12px;
	font-weight: 600;
	margin-top: 2px;
}

.cr-contact-page .cr-contact-form__field.has-error .cr-contact-form__error {
	display: block;
}

/* Consentimiento Ley 1581 — checkbox custom */
.cr-contact-page .cr-contact-form__field--consent {
	gap: 4px;
}

.cr-contact-page .cr-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cr-color-gray-400);
}

.cr-contact-page .cr-contact-form__checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cr-contact-page .cr-contact-form__consent-box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--cr-color-gray-600);
	border-radius: 3px;
	background: transparent;
	margin-top: 1px;
	transition: background-color var(--cr-transition-fast),
				border-color var(--cr-transition-fast);
	position: relative;
}

.cr-contact-page .cr-contact-form__checkbox:checked + .cr-contact-form__consent-box {
	background: var(--cr-color-primary);
	border-color: var(--cr-color-primary);
}

.cr-contact-page .cr-contact-form__checkbox:checked + .cr-contact-form__consent-box::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid var(--cr-color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cr-contact-page .cr-contact-form__checkbox:focus-visible + .cr-contact-form__consent-box {
	outline: 2px solid var(--cr-color-primary);
	outline-offset: 2px;
}

.cr-contact-page .cr-contact-form__consent-text a {
	color: var(--cr-color-primary);
	text-decoration: underline;
}

.cr-contact-page .cr-contact-form__consent-text a:hover {
	color: var(--cr-color-primary-hover);
}

/* Botón submit */
.cr-contact-page .cr-contact-form__submit {
	background: var(--cr-color-primary);
	color: var(--cr-color-white);
	border: 0;
	border-radius: 6px;
	padding: 16px 32px;
	font-family: var(--cr-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color var(--cr-transition-fast);
	align-self: flex-start;
	min-width: 220px;
}

.cr-contact-page .cr-contact-form__submit:hover:not(:disabled),
.cr-contact-page .cr-contact-form__submit:focus-visible:not(:disabled) {
	background: var(--cr-color-primary-hover);
	outline: 0;
}

.cr-contact-page .cr-contact-form__submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.cr-contact-page .cr-contact-form__submit-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--cr-color-white);
	border-radius: 50%;
	animation: cr-spin 0.7s linear infinite;
}

.cr-contact-page .cr-contact-form.is-submitting .cr-contact-form__submit-spinner {
	display: inline-block;
}

@keyframes cr-spin {
	to { transform: rotate(360deg); }
}

/* Feedback genérico (errores de servidor que no son por campo). */
.cr-contact-page .cr-contact-form__feedback {
	display: none;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

.cr-contact-page .cr-contact-form__feedback.is-visible {
	display: block;
}

.cr-contact-page .cr-contact-form__feedback.is-error {
	background: rgba(192, 0, 0, 0.12);
	border: 1px solid var(--cr-color-primary);
	color: var(--cr-color-white);
}

/* Estado success (reemplaza al form completo) */
.cr-contact-page .cr-contact-form__success {
	background: var(--cr-color-gray-900);
	border: 1px solid var(--cr-color-gray-800);
	border-radius: 12px;
	padding: 56px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	color: var(--cr-color-white);
}

.cr-contact-page .cr-contact-form__success[hidden] {
	display: none !important;
}

.cr-contact-page .cr-contact-form__success-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(37, 211, 102, 0.15);
	color: var(--cr-contact-status-success);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cr-contact-page .cr-contact-form__success-title {
	font-family: var(--cr-font-display);
	font-size: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}

.cr-contact-page .cr-contact-form__success-text {
	color: var(--cr-color-gray-400);
	font-size: 14px;
	line-height: 1.6;
	max-width: 380px;
	margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   §11 · VISITA + CTA FINAL
   ═══════════════════════════════════════════════════════════════════════ */

.cr-visit__info {
    height: 100%;
    justify-content: center;
}

/* La sección padre actúa como flex container directo. Elementor renderiza
   `e-con e-flex` con display:flex inline, pero le forzamos `flex-direction:
   column` + `align-items: center` para que todos los hijos (eyebrow, título,
   lead, carousel) se apilen centrados.

   IMPORTANTE: no usamos `> .e-con-inner` porque la sección NO renderiza ese
   wrapper cuando es `e-con-full`. Los widgets son hijos directos del e-con. */
.cr-contact-page .cr-contact-cta,
.cr-contact-page .cr-contact-cta.e-con {
	background: var(--cr-color-black) !important;
	padding: 96px var(--cr-container-pad, 24px) 64px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	gap: 28px !important;
}

/* Cada hijo directo de cr-contact-cta debe respetar el centrado del padre
   y eliminar margin propio (que Elementor inyecta por --wp--style--block-gap).
   El gap del flex container es nuestra única fuente de separación vertical. */
.cr-contact-page .cr-contact-cta > * {
	margin: 0 !important;
	width: 100%;
	max-width: var(--cr-container-max, 1280px);
}

/* El título usa cr-section-title base pero acá lo dejamos centrado y
   le damos margin 0 (el spacing viene del flex gap del padre). */
.cr-contact-page .cr-contact-cta__title,
.cr-contact-page .cr-contact-cta__title .elementor-heading-title,
.cr-contact-page .cr-contact-cta__title .elementor-widget-container {
	text-align: center !important;
	margin: 0 !important;
}

/* Lead: párrafo descriptivo gris claro, max-width legible, centrado */
.cr-contact-page .cr-contact-cta__lead,
.cr-contact-page .cr-contact-cta__lead p,
.cr-contact-page .cr-contact-cta__lead .elementor-widget-container {
	color: rgba(255, 255, 255, 0.7) !important;
	font-family: var(--cr-font-body) !important;
	font-size: clamp(15px, 1.15vw, 18px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	text-align: center !important;
	margin: 0 auto !important;
}

.cr-contact-page .cr-contact-cta__lead,
.cr-contact-page .cr-contact-cta__lead .elementor-widget-container {
	max-width: 720px !important;
}

.cr-contact-page .cr-contact-cta__lead p {
	margin: 0 !important;
}

/* El carousel ocupa el ancho disponible. Limitamos su ancho máximo y le
   damos respiro vertical extra. */
.cr-contact-page .cr-contact-cta .zenth-logo-carousel {
	width: 100%;
	max-width: 1100px;
	margin: 16px auto !important;
}

/* DUAL-BTN como sección hermana siguiente a cr-contact-cta.
   La sección que SOLO tiene `cr-dual-btn` (sin otra clase de contexto)
   y vive como `e-parent` necesita padding bottom propio + fondo negro
   + centrado horizontal de su pill rojo.

   Detectamos esto con: `.cr-contact-page .cr-dual-btn.e-parent`.
   Si vive como inner section dentro de otra cosa, el selector no aplica
   y los estilos default de cr-dual-btn (definidos en sections.css) toman. */
.cr-contact-page .cr-dual-btn.e-parent,
.cr-contact-page .cr-dual-btn.e-con.e-parent {
	background: var(--cr-color-black) !important;
	padding: 0 var(--cr-container-pad, 24px) 120px !important;
	/* Override de las propiedades flex que vienen de .cr-dual-btn base:
	   acá necesitamos que la sección padre sea full-width y centre su pill
	   rojo interno, NO que se comporte como inline-flex que se ajusta al
	   contenido. Por eso forzamos display block y centramos el pill. */
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
}

/* Cuando cr-dual-btn vive como e-parent, sus hijos directos son los 2
   widgets Button. Necesitamos un wrapper-like comportamiento: que se vea
   como pill rojo flotando en el centro. Usamos un selector que se ancle
   a los 2 buttons hijos para reconstruir el pill visualmente.

   En lugar de hacer del cr-dual-btn.e-parent el pill (sería gigante), lo
   tratamos como wrapper de página y dejamos que los 2 botones internos
   formen el pill via su propio container interno.

   La solución más limpia: cuando es e-parent, transformamos los 2 hijos
   directos para que vivan dentro de un pseudo-wrapper visual usando un
   inner container forzado. */
.cr-contact-page .cr-dual-btn.e-parent {
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0 !important;
}

/* Los hijos del wrapper-padre necesitan compartir el pill rojo. Hacemos
   que el primer hijo abra el border-radius izquierdo y el último cierre el
   derecho. El border común se simula con un wrapper visual: aplicamos el
   border al primer hijo, y un border-left no aplicado al segundo para que
   parezcan un solo pill. */
.cr-contact-page .cr-dual-btn.e-parent > .elementor-element,
.cr-contact-page .cr-dual-btn.e-parent > .elementor-widget {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Primer botón: bordes izquierdo + arriba + abajo */
.cr-contact-page .cr-dual-btn.e-parent > .elementor-widget:first-child .elementor-button {
	border: 2px solid var(--cr-color-primary) !important;
	border-right: 0 !important;
	border-radius: 999px 0 0 999px !important;
}

/* Último botón: bordes derecho + arriba + abajo */
.cr-contact-page .cr-dual-btn.e-parent > .elementor-widget:last-child .elementor-button {
	border: 2px solid var(--cr-color-primary) !important;
	border-radius: 0 999px 999px 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §12 · RESPONSIVE
   ───────────────────────────────────────────────────────────────────────
   Tablet (≤1024) → Mobile (≤767) → Mobile-small (≤480). Todos los @media de
   TAMAÑO consolidados acá, de más ancho a más angosto. Cada bloque interno
   indica qué componente toca. Al final, subsección de ACCESIBILIDAD
   (prefers-reduced-motion), que NO es un breakpoint de tamaño.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 1024px ─────────────────── */
@media (max-width: 1024px) {
	/* §2 Hero — grid cards a 1 columna + hero padding reducido */
	.cr-contact-page .cr-contact-cards,
	.cr-contact-page .cr-contact-cards.e-con-inner {
		grid-template-columns: 1fr !important;
		margin-top: 40px !important;
	}

	.cr-contact-page .cr-contact-hero,
	.cr-contact-page .cr-contact-hero.e-con,
	.cr-contact-page .cr-contact-hero.elementor-section {
		padding: 2rem 0 56px !important;
	}

	/* §9 Mensaje — sección padding + grid a 1 columna */
	.cr-contact-page .cr-contact-message,
	.cr-contact-page .cr-contact-message.e-con {
		padding: 64px 0 !important;
	}

	.cr-contact-page .cr-contact-message__grid,
	.cr-contact-page .cr-contact-message__grid.e-con-inner {
		grid-template-columns: 1fr !important;
		gap: 48px !important;
	}

	/* §9 Mensaje — título reescalado */
	.cr-contact-page .cr-contact-message__title,
	.cr-contact-page .cr-contact-message__title .elementor-heading-title,
	.cr-contact-page .cr-contact-message__title .elementor-widget-container {
		font-size: clamp(36px, 7vw, 56px) !important;
	}
}

/* ───────────────────────── MOBILE · max-width: 767px ──────────────────── */
@media (max-width: 767px) {
	/* §4/§6 Cards — alturas mínimas de preview/mapa + heading + status text */
	.cr-contact-card__preview {
		min-height: 200px;
	}

	.cr-map-preview,
	.cr-map-preview__img,
	.cr-map-preview__placeholder {
		min-height: 200px;
	}

	.cr-contact-card__heading {
		font-size: 18px;
	}

	.cr-status-bar__text {
		font-size: 11px;
	}

	/* §8 Divider checker — banda/franja reescaladas a mobile */
	.cr-divider-checker-top {
		padding-top: 70px !important;
	}
	.cr-divider-checker-top::before {
		height: 16px;
		left: 0;
		width: 200vw;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect width='16' height='16' fill='%23000'/><rect width='8' height='8' fill='%23fff'/><rect x='8' y='8' width='8' height='8' fill='%23fff'/></svg>");
		background-size: 16px 16px;
		animation: cr-checker-scroll 12s linear infinite;
	}
	.cr-divider-checker-top::after {
		top: 16px;
		height: 54px;
	}

	/* §9 Mensaje — padding-top combinado con divider en mobile */
	.cr-contact-page .cr-contact-message.cr-divider-checker-top,
	.cr-contact-page .cr-contact-message.cr-divider-checker-top.e-con {
		padding-top: 140px !important; /* 70 divider mobile + 70 respiro */
	}

	/* §2 Hero / §11 CTA — título hero + padding CTA + dual-btn padding */
	.cr-contact-page .cr-section-title .elementor-heading-title {
	    margin: 2rem 0 3rem 0 !important;
	    font-size: clamp(7vw, 7vw, 62px) !important;
	}

	.cr-contact-hero__intro .cr-section-title span {
	    font-size: clamp(10vw, 10vw, 82px) !important;
	}

	.cr-contact-page .cr-contact-cta,
	.cr-contact-page .cr-contact-cta.e-con {
		padding: 64px var(--cr-container-pad, 20px) 40px !important;
		gap: 20px !important;
	}

	.cr-contact-page .cr-dual-btn.e-parent {
		padding: 0 var(--cr-container-pad, 20px) 80px !important;
	}
}

/* ─────────────────────── MOBILE-SMALL · max-width: 480px ──────────────── */
@media (max-width: 480px) {
	/* §3 Status bar — tipografía/padding más chicos */
	.cr-status-bar {
		font-size: 12px;
		padding: 9px 18px;
	}

	/* §10 Formulario — fila split a columna + submit full + §9 card padding */
	.cr-contact-page .cr-contact-form__row--split {
		flex-direction: column;
		gap: 22px;
	}

	.cr-contact-page .cr-contact-form__submit {
		width: 100%;
	}

	.cr-contact-page .cr-contact-message__card,
	.cr-contact-page .cr-contact-message__card.e-con,
	.cr-contact-page .cr-contact-message__card.e-con-inner {
		padding: 24px !important;
	}

	/* §11 CTA — dual-btn stackea verticalmente en mobile small */
	.cr-contact-page .cr-dual-btn.e-parent {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.cr-contact-page .cr-dual-btn.e-parent > .elementor-widget:first-child .elementor-button {
		border: 2px solid var(--cr-color-primary) !important;
		border-bottom: 0 !important;
		border-radius: 24px 24px 0 0 !important;
	}

	.cr-contact-page .cr-dual-btn.e-parent > .elementor-widget:last-child .elementor-button {
		border: 2px solid var(--cr-color-primary) !important;
		border-radius: 0 0 24px 24px !important;
	}
}


/* ───────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────
   No son breakpoints de tamaño: apagan animaciones cuando el usuario pide
   movimiento reducido. Se mantienen separados de los @media de tamaño y sin
   consolidar entre sí (cada uno viaja junto a su componente original). */

/* §6 Card Mapa — detener el pulso del dot del tag */
@media (prefers-reduced-motion: reduce) {
	.cr-map-preview__tag--open .cr-map-preview__tag-dot {
		animation: none;
	}
}

/* §8 Divider checker — detener el scroll de la banda damero */
@media (prefers-reduced-motion: reduce) {
	.cr-divider-checker-top::before {
		animation: none !important;
	}
}