/**
 * 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;
	}
}

/* ============================================================
   Bloqueo de scroll con el off-canvas móvil abierto.
   El tema trae `.offcanvas--open { overflow:hidden }` pero su JS que pone la
   clase queda excluido en páginas con header Elementor (ver menu-lock.js).
   menu-lock.js reañade la clase a <html>+<body>; aquí reforzamos el lock
   (el tema no la aplica a <html> ni con !important) para que la página no
   scrollee detrás del panel y deje de verse el contenido previo junto al menú.
   ============================================================ */
html.offcanvas--open,
body.offcanvas--open {
	overflow: hidden !important;
	height: 100% !important;
}

/* ============================================================
   "Descargar app" → opciones de tienda (Google Play / App Store).
   Lógica en assets/js/app-download.js.
   · Escritorio/tablet (>=768px, botón visible): popover bajo el botón del header.
   · Móvil (<768px, botón oculto por elementor-hidden-mobile): bloque al final del
     menú off-canvas, debajo de "Preguntas frecuentes".
   ============================================================ */

/* ---- Badge de tienda (compartido en popover y menú móvil) ---- */
.ct-store-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 212px;
	padding: 9px 18px;
	border-radius: 12px;
	background: #000;
	color: #fff !important;
	text-decoration: none !important;
	line-height: 1.12;
	border: 1px solid transparent;
	-webkit-font-smoothing: antialiased;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ct-store-btn:hover,
.ct-store-btn:focus {
	background: #141414;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.ct-store-btn__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
}
.ct-store-btn__ico svg {
	display: block;
	width: auto;
	height: 26px;
}
.ct-store-btn__txt {
	display: flex;
	flex-direction: column;
	text-align: left;
}
/* color con !important: hay reglas globales que tiñen <strong>/<small> (p.ej. el
   --heading-color #02021E), y aquí el texto va siempre blanco sobre el badge negro. */
.ct-store-btn__txt small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2px;
	line-height: 1.2;
	color: #fff !important;
	opacity: .9;
	text-transform: none;
}
.ct-store-btn__txt strong {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.15;
	margin-top: 1px;
	color: #fff !important;
	font-family: inherit;
}

/* ---- Badge por IMAGEN (cuando se sube una imagen desde el Personalizador) ----
   El <img> ES el badge: reemplaza al botón SVG por defecto. */
.ct-store-link {
	display: block;
	width: 100%;
	line-height: 0;
	text-decoration: none !important;
	transition: transform .15s ease;
}
.ct-store-link:hover,
.ct-store-link:focus {
	transform: translateY(-1px);
}
.ct-store-link img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 0 auto;
	border-radius: 10px;
}

/* ---- Popover escritorio / tablet (montado en <body>, position:fixed) ---- */
.ct-appdl-pop {
	position: fixed;
	top: -9999px; /* estacionado fuera de pantalla; app-download.js lo posiciona al abrir */
	right: 0;
	z-index: 100000;
	width: 268px;
	max-width: calc(100vw - 24px);
	padding: 15px 15px 17px;
	background: var(--pop-bg, #fff); /* color editable desde el Personalizador */
	border: 1px solid rgba(2, 2, 30, .08);
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(2, 2, 30, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ct-appdl-pop.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
/* Cerrado, el popover arranca solapando el botón (top/right:0). Aunque está oculto,
   una regla global de `a` puede revertir el pointer-events heredado y dejar los
   badges "clicables" tapando el botón → el primer click no abriría. Forzamos que
   NADA dentro capture clicks mientras está cerrado. */
.ct-appdl-pop:not(.is-open),
.ct-appdl-pop:not(.is-open) * {
	pointer-events: none !important;
}
.ct-appdl-pop::before {
	content: "";
	position: absolute;
	top: -8px;
	right: var(--caret-right, 30px);
	width: 16px;
	height: 16px;
	background: var(--pop-bg, #fff);
	border-left: 1px solid rgba(2, 2, 30, .08);
	border-top: 1px solid rgba(2, 2, 30, .08);
	border-radius: 4px 0 0 0;
	transform: rotate(45deg);
}
.ct-appdl-pop__title {
	margin: 0 2px 12px;
	color: #02021E;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
}
.ct-appdl-pop__title::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: #F5A302;
	vertical-align: middle;
}
.ct-appdl-pop__btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ct-appdl-pop .ct-store-btn {
	width: 100%;
	min-width: 0;
}

/* ---- Bloque móvil dentro del off-canvas (li añadido al #navbar-nav) ---- */
/* Oculto por defecto: solo aparece en móvil (donde el botón se oculta). `!important`
   porque las reglas de menú del tema (`.navbar-nav > li`, 0,1,1) vencen a una clase
   simple y el bloque se colaría en el menú inline de escritorio. */
.ct-appdl-mobile {
	display: none !important;
}
@media ( max-width: 767px ) {
	.ct-appdl-mobile {
		display: block !important;
		list-style: none !important;
		margin: 22px 0 0 !important;
		padding-top: 22px !important;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}
	.ct-appdl-mobile__label {
		display: block;
		margin-bottom: 14px;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .2px;
		opacity: .92;
	}
	.ct-appdl-mobile__label::before {
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-right: 8px;
		border-radius: 50%;
		background: #F5A302;
		vertical-align: middle;
	}
	.ct-appdl-mobile__btns {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.ct-appdl-mobile .ct-store-btn {
		display: inline-flex !important;
		width: 100%;
		min-width: 0;
		padding: 9px 18px !important;
		background: #0a0a22;
		border-color: rgba(255, 255, 255, .16);
		color: #fff !important;
	}
	.ct-appdl-mobile .ct-store-btn:hover,
	.ct-appdl-mobile .ct-store-btn:focus {
		background: #13132f;
	}
}



/* ============================================================
   CT_HEADER_SUBMENU — Submenú móvil del header (off-canvas ≤1024px).
   El ítem con hijos ("Planes") funciona como ACORDEÓN, igual que las
   columnas del footer: su .sub-menu arranca colapsado y se despliega al
   tocar el ítem (menu-lock.js añade la clase .is-open), con el chevron
   rotando. En escritorio (≥1040px, menú inline) NO se toca: el dropdown
   hover del tema sigue funcionando igual.
   (Medido en vivo: el off-canvas se activa ≤~1039px; usamos 1024px por
   consistencia con el resto de este archivo y porque cubre todos los
   dispositivos reales, incl. iPad landscape 1024px.)
   ============================================================ */
@media ( max-width: 1024px ) {

	/* Chevron: el tema lo oculta en móvil y además lo posiciona con top:50%
	   SIN centrar (queda bajo y "resbala" por su transition:all). Lo mostramos,
	   lo centramos de verdad (translateY -50%) y rotamos solo transform. */
	.main-navigation ul.navbar-nav > li.menu-item-has-children > a {
		position: relative;
	}
	.main-navigation ul.navbar-nav > li.menu-item-has-children > a .dropdownToggle {
		display: block !important;
		position: absolute !important;
		top: 50%;
		right: 20px;
		margin: 0 !important;
		float: none !important;
		color: inherit;
		transform: translateY( -50% );
		transition: transform .25s ease;
	}
	.main-navigation ul.navbar-nav > li.menu-item-has-children.is-open > a .dropdownToggle {
		transform: translateY( -50% ) rotate( 180deg );
	}

	/* Submenú colapsado por defecto (en su sitio, no flotante). El tema lo
	   tenía en display:none; lo pasamos a block y animamos con max-height. */
	.main-navigation ul.navbar-nav > li.menu-item-has-children > ul.sub-menu {
		display: block !important;
		position: static !important;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height .3s ease, opacity .3s ease;
	}

	/* Desplegado. */
	.main-navigation ul.navbar-nav > li.menu-item-has-children.is-open > ul.sub-menu {
		max-height: 600px;
		opacity: 1;
	}
}