/* Botón Ecommerce ------------------------------------------------- */

/* Estilos visuales compartidos (píldora degradada, brillo, glow) */
.nav-cta-item>a.nav-cta-btn,
a.nav-cta-desktop {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #ffd23f, #ff8f00);
	color: #1c1c1c !important;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(255, 140, 0, 0.4);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	animation: nav-cta-glow 2.6s ease-in-out infinite;
	text-decoration: none;
}

.nav-cta-item>a.nav-cta-btn::before,
a.nav-cta-desktop::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	transform: skewX(-20deg);
	animation: nav-cta-shine 3.2s ease-in-out infinite;
}

.nav-cta-item>a.nav-cta-btn i,
a.nav-cta-desktop i {
	font-size: 16px;
	margin: 0 !important;
}

.nav-cta-item>a.nav-cta-btn:hover,
.nav-cta-item>a.nav-cta-btn:focus,
a.nav-cta-desktop:hover,
a.nav-cta-desktop:focus {
	color: #1c1c1c;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 140, 0, 0.55);
}

@keyframes nav-cta-shine {
	0% {
		left: -75%;
	}

	35% {
		left: 130%;
	}

	100% {
		left: 130%;
	}
}

@keyframes nav-cta-glow {

	0%,
	100% {
		box-shadow: 0 4px 14px rgba(255, 140, 0, 0.4);
	}

	50% {
		box-shadow: 0 4px 20px rgba(255, 140, 0, 0.7);
	}
}

/* Versión móvil: fila completa dentro del menú desplegable */
.nav-cta-item {
	list-style: none;
	margin: 10px 0 4px !important;
	text-align: center;
	float: none !important;
}

.nav-cta-item>a.nav-cta-btn {
	width: 100%;
	padding: 13px 22px !important;
	font-size: 14px;
}

/* Botón independiente, fuera del <ul> del menú, para que NUNCA
   empuje el logo ni provoque el salto de línea del menú.
   - Tablet (768-1279px): sólo ícono + tooltip.
   - Escritorio (≥1280px): ícono + texto "TIENDA ONLINE".
   .nav-cta-wrap lleva el position:absolute (se ancla al header) y
   .nav-cta-tooltip es SIBLING del <a>, no hijo, para que el
   overflow:hidden del botón (necesario para el brillo) no la
   recorte. */
.nav-cta-wrap {
	display: none;
}

a.nav-cta-desktop {
	padding: 0;
}

/* Tooltip propio (mismo lenguaje visual que .itl-tooltip del sitio),
   sólo se usa en la versión tablet (sólo ícono) */
.nav-cta-tooltip {
	position: absolute;
	top: 120%;
	left: 50%;
	transform: translateX(-50%);
	background: #1c1c1c;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, top 0.2s ease;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	z-index: 21;
}

.nav-cta-tooltip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-bottom-color: #1c1c1c;
}

.nav-cta-wrap:hover .nav-cta-tooltip,
a.nav-cta-desktop:focus~.nav-cta-tooltip {
	opacity: 1;
	visibility: visible;
	top: 130%;
}

/* Tablet: 768px - 1279px → botón circular, sólo ícono */
@media (min-width: 768px) {
	.navbar-top .container {
		position: relative;
	}

	/* Se oculta la versión de menú móvil... */
	.nav-cta-item {
		display: none !important;
	}

	/* ...y se muestra el botón circular, anclado al contenedor,
	   sin riesgo de superponerse al último enlace del menú */
	.nav-cta-wrap {
		display: block;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		z-index: 20;
	}

	a.nav-cta-desktop {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
	}

	a.nav-cta-desktop i {
		font-size: 17px;
	}

	.nav-cta-text {
		display: none;
	}

	/* Reserva espacio a la derecha del menú para el botón */
	.navbar-default .navbar-nav {
		margin-right: 62px !important;
	}
}

@media (min-width: 1200px) {
	a.nav-cta-desktop {
		width: 50px;
		height: 50px;
	}

	.nav-cta-wrap {
		right: 20px;
	}

	a.nav-cta-desktop i {
		font-size: 19px;
	}

	.navbar-default .navbar-nav {
		margin-right: 90px !important;
	}
}

/* Escritorio: ≥1280px → píldora con ícono + "TIENDA ONLINE",
   en armonía con el resto del menú. Se ancla a toda la barra
   (.navbar-top) en vez de al .container de 1170px, para poder
   usar el margen exterior del navegador y no chocar nunca con
   el último enlace del menú. */
@media (min-width: 1280px) {
	.navbar-top .container {
		position: static;
	}

	.nav-cta-wrap {
		right: 15px;
	}

	a.nav-cta-desktop {
		width: auto;
		height: auto;
		border-radius: 30px;
		padding: 10px 18px;
		gap: 6px;
	}

	a.nav-cta-desktop i {
		font-size: 15px;
	}

	.nav-cta-text {
		display: inline;
		text-transform: uppercase;
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: 0.4px;
	}

	/* con el texto visible ya no hace falta el tooltip */
	.nav-cta-tooltip {
		display: none;
	}

	/* Reserva suficiente espacio para que el texto del botón nunca
	   roce el último enlace del menú; el contenedor del menú mide
	   siempre 1170px en este tramo (≥1280px), así que este valor
	   es seguro para cualquier ancho de pantalla, de 1280 a 4K */
	.navbar-default .navbar-nav {
		margin-right: 102px !important;
	}
}