/**
 * CrediTotal — Header 10711 "Header 09" (igual al Figma 935-741).
 *
 * El header es un xmoze_header con 2 columnas: logo (izq) + [menú + botón] (der).
 * Con 6 ítems, el menú + botón "Descargar app" no caben en el contenedor por
 * defecto (~1140px) y hacían wrap (el botón / "Preguntas frecuentes" bajaban a
 * una 2ª fila y el logo quedaba descentrado). El Figma mete todo en ~1300px con
 * un espaciado de ítems más compacto. Aquí replicamos eso.
 *
 * Estructura del menú (xmoze-main-menu, estilo inline):
 *   .xmoze-main-menu-wrap > .navbar-inner > nav#site-navigation
 *     > .xmoze-menu-container > ul#navbar-nav.navbar-nav > li > a
 *
 * Solo en escritorio (>=1025px): por debajo el menú pasa a hamburguesa.
 */
@media ( min-width: 1025px ) {

	/* Contenedor del header más ancho, como el Figma (~1300). */
	.elementor-element-72a2939 > .elementor-container {
		max-width: 1300px;
	}

	/* Columna del menú + botón: en fila, sin wrap, centrado vertical. */
	.elementor-element-a919c82 .elementor-widget-wrap {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* El menú toma el espacio disponible y puede encoger (no fuerza el wrap). */
	.elementor-element-505923c {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* La lista de ítems NO envuelve (todo en una línea), centrada en su zona. */
	.elementor-element-505923c ul.navbar-nav {
		flex-wrap: nowrap !important;
		justify-content: center;
	}

	/* Ítems más compactos (como el Figma) y sin partir el texto. */
	.elementor-element-505923c ul.navbar-nav > li {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.elementor-element-505923c ul.navbar-nav > li > a {
		padding-left: 12px !important;
		padding-right: 12px !important;
		white-space: nowrap;
		font-weight: 600 !important; /* peso medio del Figma (el demo venía en 800) */
	}

	/* El botón conserva su tamaño, queda a la derecha y no parte el texto. */
	.elementor-element-9bd4b8d {
		flex: 0 0 auto;
		margin-left: 16px;
	}
	.elementor-element-9bd4b8d .elementor-button,
	.elementor-element-9bd4b8d a {
		white-space: nowrap;
	}

	/* Logo al tamaño visual del Figma. Fijamos SOLO la altura y dejamos el ancho
	   automático para respetar la proporción de la imagen (no deformar).
	   El logo que subió el cliente (logo_creditotal.webp, ~5.9:1) tiene poco
	   padding interno, así que con 33px de caja su texto queda en ~30px de alto y
	   ~193px de ancho = igual al logo del Figma (que medía 193x30 visibles). */
	.elementor-element-1a9b739 .ama-site-logo img {
		height: 33px !important;
		width: auto !important;
		max-height: 33px !important;
		max-width: none !important;
	}
}

/* ============================================================
   Anchos intermedios (1025–1299px, p.ej. al abrir el inspector / pantallas
   pequeñas de laptop): el menú estilo inline NO colapsa a hamburguesa, así que
   se compacta para que los 6 ítems + botón quepan en UNA línea y NO se monten
   sobre el botón "Descargar app". Below 1025px el tema pasa a su versión móvil.
   ============================================================ */
@media ( min-width: 1025px ) and ( max-width: 1299px ) {
	/* Ítems más compactos. */
	.elementor-element-505923c ul.navbar-nav > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 14px !important;
	}
	/* Botón más compacto y pegado al menú, sin partir texto. */
	.elementor-element-9bd4b8d { margin-left: 8px; }
	.elementor-element-9bd4b8d .elementor-button,
	.elementor-element-9bd4b8d a {
		padding-left: 16px !important;
		padding-right: 16px !important;
		font-size: 14px !important;
	}
	/* Logo un poco más chico para liberar ancho. */
	.elementor-element-1a9b739 .ama-site-logo img {
		height: 28px !important;
		max-height: 28px !important;
	}
}

/* ============================================================
   Tablet / móvil (≤1024px): el menú colapsa a hamburguesa. La columna
   menú+botón ocupa todo el ancho con la hamburguesa a la IZQUIERDA y el botón
   "Descargar app" al EXTREMO DERECHO (antes salían juntos centrados).
   ============================================================ */
@media ( max-width: 1024px ) {
	/* Header en una fila: LOGO (izq) · botón "Descargar app" · hamburguesa (der). */
	.elementor-element-72a2939 > .elementor-container {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	/* Columnas a ancho natural (no 100%) para que el logo no se aplaste. */
	.elementor-element-a0ca0e1,
	.elementor-element-a919c82 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	/* Dentro de la columna del menú: row-reverse → DOM [hamburguesa, botón] se
	   muestra como [botón, hamburguesa] (botón a la izq de la hamburguesa). */
	.elementor-element-a919c82 .elementor-widget-wrap {
		flex-direction: row-reverse !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 14px;
	}
	.elementor-element-505923c,
	.elementor-element-9bd4b8d {
		flex: 0 0 auto !important;
		margin: 0 !important;
		width: auto !important;
	}
	/* Logo visible y dimensionado en móvil (la regla de 33px era solo ≥1025). */
	.elementor-element-1a9b739 .ama-site-logo img {
		height: 28px !important;
		width: auto !important;
		max-width: 160px !important;
		display: block;
	}
}

/* ============================================================
   Loader / preloader (header.php → xmoze_preloader()): reemplazamos el
   spinner de 4 puntos por el logo animado de CrediTotal (GIF "shine sweep").
   El overlay .xmoze-preloader-wrap ya es blanco (#fff) — igual que el fondo
   del GIF — así que el logo encaja sin caja ni bordes visibles.
   Responsive: el logo escala con el viewport y conserva su proporción
   (800x260) mediante el truco de padding-top, sin depender de aspect-ratio.
   ============================================================ */
.xmoze-preloader {
	width: min( 440px, 72vw ) !important;
	height: auto !important;
	line-height: 0;
}

/* Ocultar los 4 puntos animados originales. */
.xmoze-preloader > div {
	display: none !important;
}

/* El GIF como capa, manteniendo la proporción 800:260 (260/800 = 32.5%). */
.xmoze-preloader::after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 32.5%;
	background: url( "../img/creditotal-logo-loader.gif" ) center center / contain no-repeat;
}

/* Móvil estrecho: que ocupe más ancho para verse bien. */
@media ( max-width: 480px ) {
	.xmoze-preloader {
		width: 84vw !important;
	}
}