/============================================================================================/
/* 1. ESTILOS BASE Y TIPOGRAFÍA */
/============================================================================================/
/*-------- 1.1 Tipografía Base y Global --------*/

/*
Carga de fuentes requeridas desde Google Fonts:

Instrument Sans: Solo el grosor 700 (Bold) para títulos.
Montserrat: Grosores 400 (Book/Regular) y 700 (Bold) para el cuerpo y citas.

NOTA: Gotham Rounded ha sido reemplazada por Montserrat por ser similar en estilo geométrico
y estar disponible para uso web gratuito.
*/
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;700&family=Montserrat:wght@400;700&display=swap");

/* Definición de variables CSS para facilitar el cambio de fuentes */
:root {
	--font-title: 'Instrument Sans', sans-serif;
	--font-body: 'Montserrat', sans-serif;
	--color-primary: #242495;
	--color-text: #555;
	--color-heading: #222;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
}

html * {
	/* Suavizado de fuente estandarizado */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: #fff;
	font-size: 16px;
	line-height: 1.6;
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	color: var(--color-text);
}

/* Estilo base para párrafos */
p {
	margin-bottom: 25px;
}

/* Estilo para citas o frases notables */
.cita-notable {
	font-family: var(--font-body);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	font-size: 1.25em;
	color: var(--color-heading);
}

p.lead.styled {
	font-size: 18px;
	font-weight: var(--font-weight-regular);
}

p.lead.styled.center {
	text-align: center;
	padding: 0 10%;
	margin-bottom: 45px;
	font-size: 22px;
}

/* Regla horizontal */
hr {
	margin: 15px 0 30px 0;
	border-color: #ddd;
}

/* Color general de los enlaces */
a {
	color: var(--color-primary);
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	outline: none;
}

a:hover,
a:focus {
	color: #111;
	text-decoration: none;
	outline: none;
}

/============================================================================================/
/* 2. ENCABEZADOS Y TÍTULOS DE UTILIDAD */
/============================================================================================/
/* Todos los encabezados usan la fuente de título */
h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-font-smoothing: antialiased;
	color: var(--color-heading);
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
}

/* Texto de contenido: Montserrat */
p,
li,
a,
label,
input,
select,
textarea,
button,
small,
strong,
em {
	font-family: var(--font-body);
}

/* Spans: Instrument Sans (regular por defecto) */
span {
	font-family: var(--font-title);
	font-weight: var(--font-weight-regular);
}

/* Estilo específico para el Antetítulo */
.antetitulo {
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	color: var(--color-primary);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
}

/* Ajustes para secciones con fondo blanco */
.bg_white h1,
.bg_white h2,
.bg_white h3,
.bg_white h4,
.bg_white h5,
.bg_white h6 {
	color: var(--color-heading);
}

.bg_white p {
	color: var(--color-text);
}

.bg_white p.lead.styled {
	padding: 0;
}

.widget h4 {
	color: #999;
	font-weight: var(--font-weight-regular);
	font-size: 16px;
	font-family: var(--font-body);
}

/* Estilo de Título Principal Centrado (H1/H2) */
h1.main_title,
h2.main_title {
	text-align: center;
	padding: 0;
	font-size: 36px;
	color: var(--color-heading);
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

h1.main_title span,
h2.main_title span {
	display: block;
	color: #999;
	font-size: 21px;
	text-transform: none;
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
}

/* Separador Principal (H1/H2) */
h1.main_title em,
h2.main_title em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: var(--color-primary);
	margin: auto;
	border-radius: 5px;
	margin-bottom: 20px;
}

/* Estilo de Título Principal Centrado (H3) */
h3.main_title {
	text-align: center;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 36px;
	color: #333;
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

h3.main_title span {
	display: block;
	color: #999;
	font-size: 18px;
	text-transform: none;
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
}

h3.main_title.white {
	color: #fff;
}

h3.main_title.white span {
	color: #999;
}

/* Separador Principal (H3) */
h3.main_title.white em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: var(--color-primary);
	border-radius: 5px;
	margin: auto;
	margin-bottom: 20px;
}

/* Estilo de Título Principal Alineado a la Izquierda (H3) */
h3.main_title_left {
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 28px;
	color: var(--color-heading);
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

h3.main_title_left span {
	display: block;
	color: #999;
	font-size: 21px;
	text-transform: none;
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
}

/* Separador Principal (Izquierda H3) */
h3.main_title_left em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: var(--color-primary);
	border-radius: 5px;
	margin-bottom: 20px;
}

/* Estilo de Título Principal Alineado a la Izquierda (H2) */
h2.main_title_left {
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 30px;
	color: var(--color-heading);
	font-family: var(--font-title);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

h2.main_title_left span {
	display: block;
	color: #999;
	font-size: 15px;
	text-transform: none;
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
}

/* Separador Principal (Izquierda H2) */
h2.main_title_left em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: var(--color-primary);
	border-radius: 5px;
	margin-bottom: 18px;
}

.bg_white h3.main_title_left {
	color: #333;
}


/*============================================================================================*/
/* 3. COMPONENTES: BOTONES */
/*============================================================================================*/

/* Estilos Base de Botón */
.btn_outline,
.btn_1,
.btn_full {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	display: inline-block;
	outline: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}

/* Botón de Contorno (Outline) */
a.btn_outline,
.btn_outline {
	border: 2px solid #242495;
	color: #242495;
	padding: 6px 20px;
	font-size: 14px;
}

a.btn_outline:hover,
.btn_outline:hover {
	background: #F8F8F8;
	color: #000057;
	/* Se cambió el borde para que coincida con el fondo para un aspecto sólido al pasar el ratón */
	border: 2px solid #F8F8F8;
}

/* Botón Sólido Primario */
a.btn_1,
.btn_1 {
	border: 2px solid transparent;
	/* Borde transparente añadido para un relleno/tamaño consistente al pasar el ratón */
	color: #fff;
	background: #242495;
	padding: 8px 20px;
	font-size: 14px;
}

a.btn_1.medium,
.btn_1.medium {
	padding: 10px 20px;
	font-size: 18px;
	font-weight: 500;
}

a.btn_1:hover,
.btn_1:hover {
	background: #F8F8F8;
	color: #000057;
	/* Hover consistente: fondo transparente, borde de color primario */
	border: 2px solid #000057;
}

/* Tamaño común para los botones principales */
a.btn_1.home,
.btn_1.home,
a.btn_outline,
.btn_outline {
	min-width: 160px;
	margin-top: 35px;
}

/* Botón de Ancho Completo */
a.btn_full,
.btn_full {
	border: none;
	width: 100%;
	color: #fff;
	background: #242495;
	padding: 15px 20px;
	font-size: 14px;
	line-height: 1.1;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

a.btn_full:hover,
.btn_full:hover {
	background: #F8F8F8;
	color: #000057;
	border: 2px solid #F8F8F8;
}

/*============================================================================================*/
/* 4. ESTRUCTURA Y DISEÑO (LAYOUT) */
/*============================================================================================*/

header {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

/* Empujar el contenido principal debajo del encabezado fijo */
#main-content {
	padding-top: 78px;
	/* Coincide con la altura del encabezado fijo */
}

/* Ajustes Móviles para el Encabezado y Contenido Principal */
@media (max-width: 991px) {
	header {
		height: 100px;
	}

	.navbar {
		min-height: 100px;
		padding-left: 10px !important;
		padding-right: 10px !important;
		padding-bottom: 1px !important;
	}

	#main-content {
		padding-top: 100px;
		/* Coincide con la altura del encabezado en móvil */
	}
}

/*============================================================================================*/
/* 5. ANIMACIONES (Keyframes) */
/*============================================================================================*/
/* Manteniendo keyframes para uso de utilidad, pero limpiada la aplicación de clases. */

@-webkit-keyframes swingInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(-90deg);
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
	}
}

@keyframes swingInX {
	0% {
		transform: perspective(400px) rotateX(-90deg);
	}

	100% {
		transform: perspective(400px) rotateX(0deg);
	}
}

.animated.swingInX {
	-webkit-transform-origin: top;
	transform-origin: top;
	-webkit-backface-visibility: visible !important;
	animation-name: swingInX;
	backface-visibility: visible !important;
}

@-webkit-keyframes swingOutX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0deg);
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(-90deg);
	}
}

@keyframes swingOutX {
	0% {
		transform: perspective(400px) rotateX(0deg);
	}

	100% {
		transform: perspective(400px) rotateX(-90deg);
	}
}

.animated.swingOutX {
	-webkit-transform-origin: top;
	-webkit-animation-name: swingOutX;
	animation-name: swingOutX;
	backface-visibility: visible !important;
}

@-webkit-keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

.animated.slideDown {
	animation-name: slideDown;
}

@-webkit-keyframes slideUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

.animated.slideUp {
	animation-name: slideUp;
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes flipInX {
	0% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}

	100% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}
}

.animated.flipInX {
	animation-name: flipInX;
	backface-visibility: visible !important;
}

@-webkit-keyframes flipOutX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

@keyframes flipOutX {
	0% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}

	100% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

.animated.flipOutX {
	animation-name: flipOutX;
	backface-visibility: visible !important;
}


/*============================================================================================*/
/* 1. ESTILOS BASE Y TIPOGRAFÍA */
/*============================================================================================*/

/*-------- 1.1 Tipografía Base y Global --------*/

/* Familia de fuentes web de Google - usando display=swap para mejor rendimiento */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400i,700&display=swap");

html * {
	/* Suavizado de fuente estandarizado */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: #fff;
	font-size: 16px;
	line-height: 1.6;
	/* Manteniendo font-weight 500 como se solicitó, aunque 400 es típico para el texto del cuerpo */
	font-weight: 500;
	font-family: "Roboto Condensed", Arial, sans-serif;
	color: #555;
}

/* Estilo base para párrafos */
p {
	margin-bottom: 25px;
}

p.lead.styled {
	font-size: 18px;
	font-weight: 500;
}

p.lead.styled.center {
	text-align: center;
	padding: 0 10%;
	margin-bottom: 45px;
	font-size: 22px;
}

/* Regla horizontal */
hr {
	margin: 15px 0 30px 0;
	border-color: #ddd;
}

/* Color general de los enlaces */
a {
	color: #242495;
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	outline: none;
}

a:hover,
a:focus {
	color: #111;
	text-decoration: none;
	outline: none;
}

/*============================================================================================*/
/* 2. ENCABEZADOS Y TÍTULOS DE UTILIDAD */
/*============================================================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-font-smoothing: antialiased;
	color: #222;
	font-weight: 500;
}

/* Ajustes para secciones con fondo blanco */
.bg_white h1,
.bg_white h2,
.bg_white h3,
.bg_white h4,
.bg_white h5,
.bg_white h6 {
	color: #222;
}

.bg_white p {
	/* !important eliminado */
	color: #555;
}

.bg_white p.lead.styled {
	padding: 0;
}

.widget h4 {
	color: #999;
	font-weight: 400;
	font-size: 16px;
}

/* Estilo de Título Principal Centrado (H1/H2) */
h1.main_title,
h2.main_title {
	text-align: center;
	padding: 0;
	font-size: 36px;
	color: #222;
	font-weight: 500;
	text-transform: uppercase;
}

h1.main_title span,
h2.main_title span {
	display: block;
	color: #999;
	font-size: 21px;
	text-transform: none;
}

/* Separador Principal (H1/H2) - Valor de radio corregido */
h1.main_title em,
h2.main_title em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: #242495;
	margin: auto;
	border-radius: 5px;
	margin-bottom: 20px;
}

/* Estilo de Título Principal Centrado (H3) */
h3.main_title {
	text-align: center;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 36px;
	color: #333;
	text-transform: uppercase;
}

h3.main_title span {
	display: block;
	color: #999;
	font-size: 18px;
	text-transform: none;
}

h3.main_title.white {
	color: #fff;
}

h3.main_title.white span {
	color: #999;
}

/* Separador Principal (H3) */
h3.main_title.white em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: #242495;
	border-radius: 5px;
	margin: auto;
	margin-bottom: 20px;
}

/* Estilo de Título Principal Alineado a la Izquierda (H3) */
h3.main_title_left {
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 28px;
	color: #222;
	font-weight: 500;
	text-transform: uppercase;
}

h2.main_title_left {
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 25px;
	color: #222;
	font-weight: 500;
	text-transform: uppercase;
}

h3.main_title_left span {
	display: block;
	color: #999;
	font-size: 16px;
	text-transform: none;
}

/* Separador Principal (Izquierda H3) */
h3.main_title_left em {
	display: block;
	width: 40px;
	height: 4px;
	background-color: #242495;
	border-radius: 5px;
	margin-bottom: 20px;
}

.bg_white h3.main_title_left {
	color: #333;
}

/*============================================================================================*/
/* 3. COMPONENTES: BOTONES */
/*============================================================================================*/
/* Botón */
/* Botón especial en el navbar */
/* === Botón del navbar personalizado === */
	background: #242495 !important;
	padding: 12px 28px !important;
	border-radius: 30px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.3s ease-in-out;
	display: inline-block;

	border: none !important;

/* Hover */
	background: #000057 !important;
	transform: scale(1.05);

.btn-celeste {
	background: #242495 !important;
	color: #fff !important;
	padding: 12px 28px !important;
	border-radius: 30px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.3s ease-in-out;
	display: inline-block;

	border: none !important;
}

/* Hover */
.btn-celeste:hover {
	background: #009bdf !important;
	color: #ffffff !important;
	transform: scale(1.05);
}

/* Estilos Base de Botón */
.btn_outline,
.btn_1,
.btn_full {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	display: inline-block;
	outline: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}

/* Botón de Contorno (Outline) */
a.btn_outline,
.btn_outline {
	border: 2px solid #242495;
	color: #242495;
	padding: 6px 20px;
	font-size: 14px;
}

a.btn_outline:hover,
.btn_outline:hover {
	background: #F8F8F8;
	color: #000057;
	/* Se cambió el borde para que coincida con el fondo para un aspecto sólido al pasar el ratón */
	border: 2px solid #F8F8F8;
}

/* Botón Sólido Primario */
a.btn_1,
.btn_1 {
	border: 2px solid transparent;
	/* Borde transparente añadido para un relleno/tamaño consistente al pasar el ratón */
	color: #fff;
	background: #242495;
	padding: 8px 20px;
	font-size: 14px;
}

a.btn_1.medium,
.btn_1.medium {
	padding: 10px 20px;
	font-size: 18px;
	font-weight: 500;
}

a.btn_1:hover,
.btn_1:hover {
	background: #F8F8F8;
	color: #000057;
	/* Hover consistente: fondo transparente, borde de color primario */
	border: 2px solid #000057;
}

/* Tamaño común para los botones principales */
a.btn_1.home,
.btn_1.home,
a.btn_outline,
.btn_outline {
	min-width: 160px;
	margin-top: 35px;
}

/* Botón de Ancho Completo */
a.btn_full,
.btn_full {
	border: none;
	width: 100%;
	color: #fff;
	background: #242495;
	padding: 15px 20px;
	font-size: 14px;
	line-height: 1.1;
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

a.btn_full:hover,
.btn_full:hover {
	background: #F8F8F8;
	color: #000057;
	border: 2px solid #F8F8F8;
}

/*============================================================================================*/
/* 4. ESTRUCTURA Y DISEÑO (LAYOUT) */
/*============================================================================================*/

header {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

/* Empujar el contenido principal debajo del encabezado fijo */
#main-content {
	padding-top: 78px;
	/* Coincide con la altura del encabezado fijo */
}

/* Ajustes Móviles para el Encabezado y Contenido Principal */
@media (max-width: 991px) {
	header {
		height: 100px;
	}

	.navbar {
		min-height: 100px;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	#main-content {
		padding-top: 100px;
		/* Coincide con la altura del encabezado en móvil */
	}
}

/* Navegación Superior (Iconos de Carrito/Usuario) */
#top_nav {
	position: absolute;
	right: 15px;
	top: 10px;
	z-index: 9;
}

#top_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 21px;
}

#top_nav ul li {
	display: inline-block;
	margin-left: 15px;
}

#top_nav ul li a {
	color: #555;
	display: inline-block;
	position: relative;
}

#top_nav ul li a:hover {
	color: #242495;
}

/* Contador de artículos en el carrito */
#top_nav ul li a .cart_count {
	font-size: 11px;
	display: inline-block;
	background-color: #242495;
	color: #fff;
	padding: 2px 5px;
	font-weight: 700;
	position: absolute;
	bottom: 0;
	right: -2px;
	line-height: 1;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* Logo General */
#logo {
	margin: 15px 0 0 0;
}

/* Estilos para el logo en la página de inicio (con H1) */
#logo_home h1 {
	margin: 15px 0 0 0;
	padding: 0;
}

#logo_home h1 a {
	display: block;
	width: 210px;
	height: 96px;
	/* Nota: Se mantiene la ruta de imagen original; asegúrate de que sea correcta */
	background-image: url(../img/logo1.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 200px 80px;
	text-indent: -9999px;
}

/* Ajuste del logo para pantallas de alta densidad (Retina) */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	#logo_home h1 a {
		/* Nota: Se mantiene la ruta de imagen original; asegúrate de que sea correcta */
		background-image: url(../img/logo1.jpg);
		background-size: 190px 48px;
	}
}

/* Subheaders (Cabeceras Secundarias) */

/* Subheader 1 - Ejemplo de fondo */
#subheader_1 {
	height: 700px;
	/* Nota: Se mantiene la ruta de imagen original; asegúrate de que sea correcta */
	background-image: url(../img/subheader_1.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/* Contenedor de la ventana Parallax (Altura completa) */
.parallax_window_in {
	height: 550px;
	position: relative;
	display: table;
	width: 100%;
}

/* Contenedor de la ventana Parallax (Altura corta) */
.parallax_window_in.short {
	height: 400px;
	position: relative;
	display: table;
	width: 100%;
}

/* Contenido interno del Subheader (Sub_content_in) */
#sub_content_in {
	display: table-cell;
	padding: 0 0 0 0;
	vertical-align: middle;
	text-align: right;
	/* Overlay azul oscuro translúcido */
	background: rgba(0, 0, 87, 0.35);
}

/* Ajustes para el contenido interno de Subheader corto */
.parallax_window_in.short #sub_content_in {
	display: table-cell;
	padding: 45px 0 0 0;
	vertical-align: bottom;
	text-align: left;
	background: rgba(0, 0, 87, 0.35);
}

/* Ajuste específico para Subheader corto de carrito */
.parallax_window_in.short #sub_content_in.cart {
	padding: 0 0 0 0;
	vertical-align: middle;
	text-align: center;
}



/* Título principal dentro del Subheader */
#sub_content_in h1 {
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 42px;
	margin-bottom: 0;
}

/* Párrafo/Subtítulo dentro del Subheader */
#sub_content_in p {
	color: #fff;
	font-size: 24px;
	font-weight: 300;
}

/* Estilo principal del elemento <main> */
main {
	background-color: #f8f8f8;
}

/*-------- 1.4 Navegación Principal --------*/


.contact-info {
	/* Estilos generales de la información de contacto */
	color: #ffffff;
	/* Texto blanco */
	font-size: 14px;
	/* Tamaño de fuente adecuado */
}

.contact-info span {
	/* Separar el teléfono y el email */
	margin-left: 20px;
}

.contact-info i {
	/* Espacio entre el ícono y el texto */
	margin-right: 5px;
}

.contact-info a {
	/* Asegurar que los enlaces de contacto también sean blancos */
	color: #ffffff;
	text-decoration: none;
	/* Eliminar el subrayado */
}

/* --- 2. Estilos para la barra de navegación principal (Navbar) --- */

/* Altura de navbar */
.navbar {
	min-height: 70px;
	/* Ajusta la altura que quieras */
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 15px;

}

/* Logo */
.navbar-brand img {
	height: 52px;
	width: auto;
	margin-top: 0;
	margin-bottom: 0;
	display: inline-block;
}

/* Links centrados verticalmente */
.navbar-nav>li>a {
	padding-top: 10px;
	/* Ajusta según la altura de la navbar */
	padding-bottom: 10px;
	margin-top: 20px;
	font-size: 18px;
	font-family: var(--font-body);
	color: #242495;
}

.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus {
	color: #000057;
}

.navbar-nav>.active>a,
.navbar-nav>.active>a:focus,
.navbar-nav>.active>a:hover {
	color: #000057;
}

.dropdown-menu {
	font-size: 16px;
}

.dropdown-menu>li>a {
	padding: 12px 16px;
	font-family: var(--font-body);
	line-height: 1.35;
	color: inherit;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
	color: #000057;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
	color: #242495;
	background: transparent;
}

/* Dropdown íconos */
.dropdown-menu i {
	margin-right: 8px;
	font-size: 16px;
}


/*============================================================================================*/
/* 5. ANIMACIONES (Keyframes) */
/*============================================================================================*/
/* Manteniendo keyframes para uso de utilidad, pero limpiada la aplicación de clases. */

@-webkit-keyframes swingInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(-90deg);
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
	}
}

@keyframes swingInX {
	0% {
		transform: perspective(400px) rotateX(-90deg);
	}

	100% {
		transform: perspective(400px) rotateX(0deg);
	}
}

.animated.swingInX {
	-webkit-transform-origin: top;
	transform-origin: top;
	-webkit-backface-visibility: visible !important;
	animation-name: swingInX;
	backface-visibility: visible !important;
}

@-webkit-keyframes swingOutX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0deg);
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(-90deg);
	}
}

@keyframes swingOutX {
	0% {
		transform: perspective(400px) rotateX(0deg);
	}

	100% {
		transform: perspective(400px) rotateX(-90deg);
	}
}

.animated.swingOutX {
	-webkit-transform-origin: top;
	-webkit-animation-name: swingOutX;
	animation-name: swingOutX;
	backface-visibility: visible !important;
}

@-webkit-keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

.animated.slideDown {
	animation-name: slideDown;
}

@-webkit-keyframes slideUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

@keyframes slideUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

.animated.slideUp {
	animation-name: slideUp;
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes flipInX {
	0% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}

	100% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}
}

.animated.flipInX {
	animation-name: flipInX;
	backface-visibility: visible !important;
}

@-webkit-keyframes flipOutX {
	0% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

@keyframes flipOutX {
	0% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}

	100% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

.animated.flipOutX {
	animation-name: flipOutX;
	backface-visibility: visible !important;
}

/*============================================================================================*/
/* 6. CONTENIDO ESPECÍFICO DE PÁGINAS */
/*============================================================================================*/

/*-------- 6.1 Inicio - Todas las versiones --------*/

.owl-slide .container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.owl-carousel .owl-slide::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.45);
	/* Ajusta el color y opacidad */
	z-index: 1;
	/* Debajo del texto */
}

.owl-carousel .owl-slide>* {
	position: relative;
	z-index: 2;
	/* Encima del overlay */
}

:root {
	--main-white-color: #fff;
	--main-black-color: #000;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.cover {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.owl-carousel .owl-slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* <-- cambia cover por contain para mostrar toda la imagen */
	height: 300px;
	/* altura natural */
	min-height: auto;
	padding: 60px 0;
	/* margen interno para que el texto respire */
	color: #fff;
}

.owl-slide-text {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.owl-slide-title {
	font-size: clamp(18px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 15px;
	color: #fff;
}

.owl-slide-subtitle {
	font-size: clamp(16px, 3vw, 22px);
	margin-bottom: 20px;
}

/* Botón */
.owl-slide-cta {
	padding: 10px 24px;
	font-size: 15px;
	border-radius: 25px;
	background: #242495;
}

.owl-slide-cta:hover {
	background: #000057;
	transform: scale(1.05);
}

/* Animaciones */
.owl-slide-animated {
	transform: translateY(20px);
	opacity: 1 !important;
	visibility: visible !important;
	transition: all 0.5s ease;
}

.owl-slide-animated.is-transitioned {
	transform: none;
	opacity: 1;
	visibility: visible;
}

.owl-slide-title.is-transitioned {
	transition-delay: 0.2s;
}

.owl-slide-subtitle.is-transitioned {
	transition-delay: 0.35s;
}

.owl-slide-cta.is-transitioned {
	transition-delay: 0.5s;
}

/* Iconos slide 2 */
.iconos-38 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 20px;
}

.iconos-38 .icono {
	flex: 1 1 220px;
	max-width: 280px;
	text-align: center;
}

.iconos-38 i {
	font-size: 48px;
	margin-bottom: 10px;
}

.iconos-38 h4 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 6px;
	color: #fff;
}

.iconos-38 p {
	font-size: 14px;
	color: #e3e3e3;
	line-height: 1.4;
}

/* Dots */
.owl-carousel .owl-dots .owl-dot span {
	background: transparent;
	border: 1px solid var(--main-white-color);
	transition: all 0.2s ease;
}

.owl-carousel .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot:hover span {
	background: var(--main-white-color);
}

/* Responsive */
@media (max-width: 991px) {
	.navbar-brand img {
		margin-top: auto;
	}

	.iconos-38 {
		flex-direction: row;
		/* mantener horizontal */
		flex-wrap: nowrap;
		/* evitar que se bajen */
		justify-content: space-around;
		/* espacio uniforme entre iconos */
		gap: 10px;
		/* espacio opcional */
		margin-top: 20px;
	}

	.iconos-38 .icono {
		flex: 1 1 0;
		/* que todos ocupen el mismo ancho proporcional */
		max-width: 120px;
		/* ancho máximo en móviles */
		min-width: 80px;
		/* ancho mínimo para que no se achiquen demasiado */
	}

	.iconos-38 i {
		font-size: 28px;
		/* reducir tamaño del icono */
	}

	.iconos-38 h4 {
		font-size: 14px;
		/* reducir título */
	}

	.iconos-38 p {
		font-size: 12px;
		/* reducir texto */
	}
}



/*-------- 6.2 Acerca de (About) --------*/

/* Sección testimonios moderna */
.carousel_testimonials {
	width: 100% !important;
}

.carousel_testimonials .box_overlay {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 25px 30px 25px 60px;
	/* espacio para la comilla */
	border-radius: 8px;
	color: #fff;
	text-align: justify;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	min-height: 120px;
	position: relative;
	font-size: 16px;
	line-height: 1.6;
	transition: transform 0.3s ease;
}

.carousel_testimonials .box_overlay:hover {
	transform: translateY(-5px);
}

.carousel_testimonials .box_overlay::before {
	content: "❝";
	font-size: 60px;
	/* ajusta el tamaño que quieras */
	color: rgba(255, 255, 255, 0.3);
	position: absolute;
	top: 5px;
	/* desde arriba del box */
	left: 15px;
	/* espacio desde el borde */
}

.carousel_testimonials .comment {
	display: block;

}

.carousel_testimonials .author {
	font-weight: bold;
	color: #F8F8F8;
	margin-top: 15px;
	font-size: 16px;
}

.carousel_testimonials .author small {
	color: #ccc;
	font-weight: normal;
	font-size: 14px;
	margin-left: 5px;
}


@media (max-width: 767px) {
	.carousel_testimonials .box_overlay {
		width: 95%;
		/* Ocupa casi todo el ancho del viewport */
		margin: 0 auto;
		/* Centra horizontalmente */
		padding: 25px 20px;
		/* Ajusta el espacio interno para pantallas pequeñas */
	}

	.container {
		padding-left: 5px;
		/* Menos padding lateral */
		padding-right: 5px;
	}

	.carousel_testimonials .comment {
		text-align: left;
		/* Evita los saltos de texto irregulares */
	}
}



/*-------- 6.3 Servicios --------*/

/* ========================================= */
/* ESTILO GENERAL DEL BLOQUE DE SERVICIO (BOX_SERVICE) */
/* ========================================= */
.box_service {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px;
	background: #242495;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	height: auto;
	/* que JS pueda ajustar la altura */

	/* CAMBIO CLAVE 1: Color de texto general blanco para el párrafo y el enlace */
	color: #ffffff;

	/* Sombra */
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);

	/* Transición */
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* ========================================= */
/* EFECTO HOVER (BOX_SERVICE) CON OVERLAY) */
/* ========================================= */
a.box_service {
	position: relative;
	display: block;
	overflow: hidden;
	/* necesario para que el overlay no se salga */
	transition: transform 0.3s ease;
}

a.box_service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	/* transparente por defecto */
	transition: background-color 0.3s ease;
	z-index: 1;
	/* por encima de la imagen/fondo */
}

a.box_service:hover {
	transform: translateY(-10px);
}

a.box_service:hover::before {
	background-color: rgba(3, 0, 0, 0.2);
	/* overlay clarito al hacer hover */
}

/* Asegurarse de que el contenido quede por encima del overlay */
a.box_service>* {
	position: relative;
	z-index: 2;
}

/* NUEVA REGLA: Párrafo se mantiene blanco al hacer hover */
a.box_service:hover p {
	color: #ffffff;
}

/* ========================================= */
/* TÍTULO (H3) DE BOX_SERVICE */
/* ========================================= */
.box_service h3 {
	font-size: 21px;
	/* CAMBIO CLAVE 2: Color del título blanco */
	color: #ffffff;
}

/* ========================================= */
/* ELEMENTO SPAN DECORATIVO DE BOX_SERVICE */
/* ========================================= */
.box_service span {
	width: 20px;
	height: 20px;
	display: block;
	top: 15px;
	right: 15px;
	position: absolute;
	line-height: 1;
	font-size: 16px !important;
	color: #ccc;
}

/* ========================================= */
/* ICONOS (i) DE BOX_SERVICE */
/* ========================================= */
a.box_service i {
	width: 140px;
	height: 140px;
	line-height: 140px;
	border-radius: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 80px;
	/* CAMBIO CLAVE 3: Color del ícono blanco (el fondo ya es blanco) */
	color: #242495;
	background-color: rgb(255, 255, 255);
	margin-bottom: 15px;
}

/* ========================================= */
/* RESPONSIVE: Ajustar ancho completo en móviles */
/* ========================================= */
@media (max-width: 767px) {
	a.box_service {
		width: 100%;
		padding: 25px 15px 10px 15px;
		margin-bottom: 10px;
	}

	a.box_service i {
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 60px;
	}

	a.box_service i.icon-sweeper-machine {
		width: 70px;
		height: 70px;
		line-height: 70px;
		font-size: 30px;
	}
}


/* Texto principal en secciones de fondo blanco */
.bg_white .lead,
.bg_white .box_service_2 p {
	text-align: left;

}

.row {
	margin-left: 10px;
	margin-right: 10px;
}

/* Fondo de características */
.features-bg {
	position: relative;
	min-height: 400px;
	/* Nota: Se mantiene la ruta de imagen original; asegúrate de que sea correcta */
	background: url(../img/banner-800x400.jpg) no-repeat center center;
	background-size: cover;
}

/* Imagen de características */
.features-img {
	width: 100%;
	height: 400px;
	text-align: center;
	line-height: 400px;
}

/* Contenido de características */
.features-content {
	position: relative;
	padding: 11% 100px 10% 100px;
	height: 400px;
	background-color: #222;
	color: #fff;
}

.features-content h3 {
	font-size: 32px;
	line-height: 34px;
	text-transform: uppercase;
	color: #fff;
}

.features-content p {
	font-size: 17px;
}

/* Estilo para bloques de servicio alternativos (box_service_2) con ícono a la izquierda (obsoleto por el nuevo enfoque de barra) */
.box_service_2 {
	position: relative;
	padding-left: 50px;
}

/* Ícono en box_service_2 (anterior) */
.box_service_2 i {
	font-size: 36px;
	position: absolute;
	left: 0;
	top: 0;
	color: #242495;
}

/* Fondo con Parallax para secciones (Ejemplo de cotización) */
.bg_content {
	margin-top: 70px;
	position: relative;
	/* importante */
	width: 100%;
	/* Nota: Se mantiene la ruta de imagen original; asegúrate de que sea correcta */
	background: url(../img/cotizacion.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
	color: #fff;
	/* color blanco por defecto */
	overflow: hidden;
}

/* Overlay negro semitransparente para bg_content */
.bg_content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 87, 0.35);
	pointer-events: none;
	/* deja pasar clics */
	z-index: 0;
	/* overlay debajo del contenido */
}

/* Contenido que va encima del overlay en bg_content */
.bg_content>* {
	position: relative;
	z-index: 1;
	/* encima del overlay */
	color: #fff;
	/* fuerza el color blanco */
}

/* Para asegurar legibilidad incluso si hay otros divs internos en bg_content */
.bg_content h2,
.bg_content p,
.bg_content form {
	color: #fff !important;
	text-shadow: 1px 1px 4px rgba(0, 0, 87, 0.35);
	/* opcional, mejora la lectura */
}



/* Servicios - Barra Azul Vertical (Box_service_2) */


/* Estilo para el contenedor general del servicio */
.box_service_2 {
	/* Es crucial asegurarse de que la posición sea relativa */
	position: relative;
	padding-left: 20px;
	/* Ajusta el espacio para que la barra no se pegue al texto */
}

/* Estilo para la barra azul vertical (usando el H4 como referencia) */
.box_service_2 h4::before {
	content: "";
	/* Obligatorio para pseudo-elementos */
	position: absolute;
	/* Posiciona la barra a la izquierda del H4, dentro del box_service_2 */
	left: 0;
	top: 0;

	/* Dimensiones y color de la barra */
	width: 4px;
	/* Grosor de la barra */
	height: 100%;
	/* La barra ocupa toda la altura del h4 */
	background-color: #242495;

	/* Para centrar la barra verticalmente con el título */
	transform: translateY(0);
}

/* Opcional: Estilo para el texto en mayúsculas como en la imagen */
.box_service_2 h4 {
	text-transform: uppercase;
	font-size: 1.2em;
	/* Puedes ajustar el tamaño */
	font-weight: 700;
	/* Negrita */
	margin-top: 0;
	/* Asegura que el H4 esté arriba */
}

/* Estilo para el párrafo */
.box_service_2 p {
	color: #555;
	font-size: 1.05em;
	line-height: 1.6;
}


/*-------- 6.4 Página 404 --------*/
#error_page {
	width: 100%;
	height: 650px;
	text-align: center;
	background: #002849 url(../img/pattern_1.svg) repeat fixed;
	color: #fff;
	padding-top: 180px;
}

#error_page h2 {
	margin-top: 30px;
	font-size: 140px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
}

#error_page h2 i {
	color: #FFC107;
}

@media (max-width: 767px) {
	#error_page h2 {
		font-size: 72px;
	}
}

#error_page p {
	font-size: 21px;
}

@media (max-width: 767px) {
	#error_page p {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	#error_page {
		padding-top: 100px;
		height: 500px;
	}
}



/*============================================================================================*/
/* 7. UTILIDADES Y AJUSTES FINALES */
/*============================================================================================*/

/*-------- 7.1 Colores de fondo de wrappers --------*/
.bg_white {
	background-color: #fff;
}

.bg_gray {
	background-color: #f8f8f8;
}


/*-------- 7.2 Espaciado (Spacing) --------*/
.add_bottom_15 {
	margin-bottom: 15px;
}

.add_bottom_30 {
	margin-bottom: 30px;
}

.add_bottom_45 {
	margin-bottom: 45px;
}

.add_bottom_60 {
	margin-bottom: 60px;
}

.add_bottom_75 {
	margin-bottom: 75px;
}

.add_top_20 {
	margin-top: 20px;
}

.add_top_30 {
	margin-top: 30px;
}

.add_top_60 {
	margin-top: 60px;
}

.add_top_100 {
	margin-top: 100px;
}

.add_top_150 {
	margin-top: 150px;
}

.more_padding_left {
	padding-left: 40px;
}

.nomargin_top {
	margin-top: 0;
}

.nopadding {
	margin: 0 !important;
	padding: 0 !important;
}

.nomargin {
	margin: 0 !important;
}

.margin_60 {
	padding-top: 60px;
	padding-bottom: 60px;
}


.margin_bottom_60 {
	margin-bottom: 100px;
}

.margin_120 {
	padding-top: 120px;
	padding-bottom: 120px;
}

.margin_120_95 {
	padding-top: 120px;
	padding-bottom: 95px;
}

.margin_60_35 {
	padding-top: 60px;
	padding-bottom: 100px;
}

.margin_60_0 {
	padding-top: 100px;
	padding-bottom: 0;
}

.margin_bottom_60 {
	margin-bottom: 60px;
	display: inline-block;
	/* hace que el margin-bottom funcione */
}

/* Contenedor de las diapositivas */
.owl-carousel .owl-stage {
	position: relative;
	-ms-touch-action: pan-Y;
}

/* Truco para limpiar los flotantes dentro del stage */
.owl-carousel .owl-stage:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* Contenedor exterior que maneja el recorte y la visibilidad */
.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0px, 0px, 0px);
}

/* Elemento individual de la diapositiva */
.owl-carousel .owl-item {
	position: relative;
	min-height: 1px;
	float: left;
	/* Optimización de rendimiento y antialiasing */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

/* Imágenes dentro de las diapositivas */
.owl-carousel .owl-item img {
	display: block;
	width: 100%;
	-webkit-transform-style: preserve-3d;
}

/* Mostrar carrusel solo cuando ha sido cargado por JavaScript */
.owl-carousel.owl-loaded {
	display: block;
}

/* Ocultar durante la carga */
.owl-carousel.owl-loading {
	opacity: 0;
	display: block;
}

.owl-carousel.owl-hidden {
	opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
	visibility: hidden;
}

/* Evitar selección durante el arrastre */
.owl-carousel.owl-drag .owl-item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Cursor de agarre */
.owl-carousel.owl-grab {
	cursor: move;
	cursor: grab;
}

/* Soporte RTL (Right-to-Left) */
.owl-carousel.owl-rtl {
	direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
	float: right;
}

.no-js .owl-carousel {
	display: block;
}

/* Animaciones */
.owl-carousel .animated {
	-webkit-animation-duration: 1000ms;
	animation-duration: 1000ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
	z-index: 0;
}

.owl-carousel .owl-animated-out {
	z-index: 1;
}

.owl-carousel .fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

/* Keyframes para la animación fadeOut */
@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Transición de altura para carruseles de altura variable */
.owl-height {
	transition: height 500ms ease-in-out;
}

/* Animación de lazy loading */
.owl-carousel .owl-item .owl-lazy {
	opacity: 0;
	transition: opacity 400ms ease;
}

.owl-carousel .owl-item img.owl-lazy {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* Contenedor de video */
.owl-carousel .owl-video-wrapper {
	position: relative;
	height: 100%;
	background: #000;
}

/* Ícono de reproducción de video (Modificado para usar CSS simple como fallback) */
.owl-carousel .owl-video-play-icon {
	position: absolute;
	height: 80px;
	width: 80px;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
	/* La imagen original 'owl.video.play.png' no existe. Usamos CSS como fallback. */
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	transition: all 100ms ease;
}

/* Creación del triángulo de reproducción con CSS */
.owl-carousel .owl-video-play-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 55%;
	/* Ajuste para centrado visual del triángulo */
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent #000000;
}

.owl-carousel .owl-video-play-icon:hover {
	-webkit-transform: scale(1.3, 1.3);
	-ms-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
	display: none;
}

.owl-carousel .owl-video-tn {
	opacity: 0;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
	position: relative;
	z-index: 1;
	height: 100%;
	width: 100%;
}






/* AJUSTES CLAVE PARA MÓVILES (Max-width: 768px): Flechas abajo y centradas */
@media (max-width: 768px) {

	/* AJUSTE CLAVE 1: Aumentamos el padding para el espacio inferior si el contenido es corto */
	/* Esto es crucial si el carrusel es el contenedor de todo y el contenido no es alto */
	.owl-carousel {
		padding-bottom: 60px;
		/* Aumentado a 120px para dar más espacio bajo el texto */
		position: relative;
	}


}


/* -------------------------------------- */
/* CORRECCIÓN Y MEJORA: PUNTOS DE NAVEGACIÓN (DOTS) */
/* -------------------------------------- */
.owl-theme .owl-dots {
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	margin-top: 20px;
	/* Valor por defecto para desktop */
}

/* Mantener los dots visibles en marcas */
.brands-carousel .owl-dots {
	margin-top: 15px !important;
	display: block;
}

/* Horizontalidad y Espaciado */
.owl-theme .owl-dots .owl-dot {
	display: inline-block;
	zoom: 1;
	margin: 0 5px;
}

/* Estilo del punto base (el span interno) */
.owl-theme .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px 0;
	background: #9d9df0 !important;
	/* Color inactivo */
	display: block;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	border-radius: 30px;
	/* Transición para tamaño y color */
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ENHANCEMENT: Punto Activo (Píldora Moderna) */
.owl-theme .owl-dots .owl-dot.active span {
	/* AJUSTE CLAVE 4: Usamos el azul corporativo para los puntos activos */
	background: #242495 !important;
	width: 25px;
	/* Más ancho */
	height: 10px;
	/* Asegurar la altura estándar */
	border-radius: 10px;
	/* Forma de píldora */
	/* ENHANCEMENT: Sutil elevación para el activo */
	transform: scale(1.1);
}

/* ENHANCEMENT: Hover sobre el punto (Agrandar un poco y color intermedio) */
.owl-theme .owl-dots .owl-dot:hover:not(.active) span {
	background: #242495;
	/* Tono intermedio para el hover */
	transform: scale(1.2);
	/* Sutilmente más grande */
}

/* Optimización de rendimiento para el item */
.owl-item {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	transform: translateZ(0) scale(1.0, 1.0);
}

/*------------------------------------------------------------------------------------------------------------------------------------------*/
/* Estilos Principales (Continuación) */
/*------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------- 3.7 List --------*/
ul.list_ok {
	list-style: none;
	margin: 35px 0 30px 0;
	padding: 0;
	line-height: 1.3;
	font-family: var(--font-body);
	font-size: 18px;
}

ul.list_ok li {
	position: relative;
	padding-left: 40px;
	margin-bottom: 20px;
}

ul.list_ok li:before {
	font-family: 'Font Awesome 6 Free';
	content: "\f061";
	/* → flecha derecha */
	font-weight: 900;

	position: absolute;
	left: 0;
	top: -3px;
	font-size: 18px;
	color: #242495;
}

/*-------- 3.8 Contact Form --------*/
/* Contenedor general del formulario de contacto */
#contact_form {
	padding: 30px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Estilo para los inputs y textareas */
#contact_form .form-control {
	height: 45px;
	margin-bottom: 20px;
	border-radius: 3px;
	box-shadow: none;
	padding: 10px 15px;
	font-size: 14px;
}

#contact_form textarea.form-control {
	height: 150px;
	resize: vertical;
}

/* Estilo para el mensaje de éxito/error del formulario */
#message-contact {
	margin-top: 15px;
	padding: 10px;
	border-radius: 3px;
	font-weight: bold;
	text-align: center;
}

/* Botón de envío, asumiendo una clase de botón genérica (ej. .btn_1) */
#contact_form button[type="submit"] {
	background-color: #242495;
	color: #fff;
	padding: 12px 25px;
	border: none;
	border-radius: 3px;
	font-weight: 600;
	transition: background-color 0.3s ease;
	text-transform: uppercase;
	cursor: pointer;
}

#contact_form button[type="submit"]:hover {
	background-color: #000057;
}

/*-------- 3.9 Dropcap (Letra Capital) --------*/
.dropcap:first-letter {
	float: left;
	margin: 0 15px 0 0;
	font-size: 70px;
	line-height: 60px;
	color: #242495;
	font-family: inherit;
	font-weight: bold;
}

/*-------- 3.10 Timeline --------*/
.timeline {
	position: relative;
	padding: 0;
	list-style: none;
}

/* Línea vertical central */
.timeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background-color: #eee;
}

.timeline>li {
	margin-bottom: 20px;
	position: relative;
	text-align: left;
	/* Alineación por defecto */
}

/* Contenido de cada elemento */
.timeline>li .timeline-panel {
	width: 45%;
	/* Deja espacio para la línea central y los puntos */
	float: left;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #f9f9f9;
}

/* Elementos a la derecha de la línea */
.timeline>li.timeline-inverted .timeline-panel {
	float: right;
}

/* Círculo/Punto en la línea de tiempo */
.timeline>li .timeline-badge {
	color: #fff;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -15px;
	background-color: #242495;
	border-radius: 50%;
	z-index: 100;
}

/* Conexión (flecha) del panel a la línea central */
.timeline>li .timeline-panel:before {
	content: " ";
	display: table;
}

.timeline>li .timeline-panel:after {
	content: " ";
	display: table;
	clear: both;
}


/* Adaptación para la vista móvil: Línea de tiempo a la izquierda */
@media (max-width: 767px) {
	.timeline:before {
		left: 20px;
		/* Mueve la línea a la izquierda */
	}

	.timeline>li {
		margin-bottom: 30px;
	}

	.timeline>li .timeline-panel {
		width: calc(100% - 60px);
		/* Ocupa el espacio restante */
		float: right;
	}

	.timeline>li .timeline-badge {
		left: 20px;
		margin-left: -15px;
		/* Ajuste para centrar el badge en la nueva posición de la línea */
	}

	/* Limpia la inversión para móvil, todos los paneles van a la derecha */
	.timeline>li.timeline-inverted .timeline-panel {
		float: right;
	}
}


/*-------- 3.11 Newsletter footer -------*/
#message-newsletter_2 {
	text-align: center;
}

#submit-newsletter_2.button {
	padding: 15px 35px;
	display: inline-block;
	background-color: #000057;
	color: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	border: 0;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	outline: none;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#submit-newsletter_2.button:hover {
	background-color: #fff;
	color: #000057;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	/* Sutil elevación */
}

#newsletter_container {
	/* Asume que ../img/envelope_pattern.png es un patrón para el fondo */
	background: #242495 url(../img/envelope_pattern.png) repeat center center;
	padding: 60px 0;
	/* Añadir padding para darle altura */
}

#newsletter_container h3 {
	font-size: 32px;
	margin: 0 0 20px 0;
	color: #fff;
	font-weight: 700;
}

input.form-control#email_newsletter_2 {
	margin-bottom: 0;
	background-color: #fff;
	border: none;
	height: 50px;
	font-size: 15px;
	padding-left: 20px;
	width: 380px;
	margin-top: -2px;
	margin-right: 5px;
	color: #555;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

input.form-control#email_newsletter_2:focus {
	border-color: #242495;
	/* Color de foco */
	outline: 0;
	-webkit-box-shadow: 0 0 0 0.2rem rgba(36, 36, 149, 0.25);
	box-shadow: 0 0 0 0.2rem rgba(36, 36, 149, 0.25);
	color: #555;
}

/*-------- 3.12 Footer --------*/
footer {
	padding: 40px 0 20px 0;
	background-color: #1a1a1a;
	color: #999;
	font-size: 14px;
}

/* Contenedor principal de los enlaces y la información */
footer .container {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 30px;
	margin-bottom: 20px;
}

/* Títulos de las columnas del footer */
footer h3 {
	color: #fff;
	font-size: 16px;
	margin-bottom: 25px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Lista de enlaces */
footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer ul li {
	margin-bottom: 10px;
}

footer ul li a {
	color: #999;
	text-decoration: none;
	transition: color 0.3s ease;
}

footer ul li a:hover {
	color: #fff;
}


/* Redes sociales en el footer */
.social-icons a {
	color: #fff;
	margin: 0 5px;
	font-size: 18px;
	transition: color 0.3s ease;
}

.social-icons a:hover {
	color: #242495;
}

/*-------- 3.13 Page Header (Encabezado de página interna) --------*/
#page_header {
	background-color: #f7f7f7;
	/* Color de fondo suave */
	padding: 40px 0;
	text-align: center;
	border-bottom: 1px solid #ddd;
}

#page_header h1 {
	font-size: 38px;
	font-weight: 700;
	color: #333;
	margin: 0;
}

/* Breadcrumbs (Rutas de navegación) */
.breadcrumb {
	padding: 8px 15px;
	margin-bottom: 0;
	list-style: none;
	background-color: transparent;
	border-radius: 4px;
	display: inline-block;
}

.breadcrumb>li {
	display: inline-block;
	color: #666;
}

.breadcrumb>li a {
	color: #242495;
	text-decoration: none;
}

.breadcrumb>li.active {
	color: #333;
	font-weight: 600;
}

/* Separador de breadcrumb (ej. flecha o barra) */
.breadcrumb>li+li:before {
	content: "/\00a0";
	/* Espacio con barra */
	padding: 0 5px;
	color: #ccc;
}


/*-------- 3.14 Back to Top (Botón de volver al inicio) --------*/
#toTop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: #000057;
	color: #fff;
	font-size: 20px;
	border-radius: 50%;
	z-index: 999;
	/* Asegura que esté por encima de otros elementos */
	opacity: 0.7;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

#toTop:hover {
	opacity: 1;
	background-color: #242495;
	cursor: pointer;
}

/*============================================================================================*/
/* 5. Nosotros  */
/*============================================================================================*/

/* Contenedor de las tarjetas de valores */
.row.text-center.margin-top-20 {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 20px;
}

.card-value {
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #f9f9f9;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	padding-top: 15px;
	margin-bottom: 10px;
	height: 100%;
	/* Asegura que Flexbox funcione */
	transition: box-shadow 0.3s ease;
}

.card-value:hover {
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.card-value h5 {
	font-weight: bold;
	margin-bottom: 10px;
	color: #000057;
	font-size: 16px;
}

.card-value p {
	font-size: 14px;
	line-height: 1.3;
	padding: 0 15px 15px 15px;
	/* Ajuste para mejor espaciado */
	flex-grow: 1;
	/* Permite que el párrafo empuje el contenido hacia arriba */
}

/* Estilos de los íconos */
.card-value i {
	color: #000057 !important;
	margin-bottom: 10px;
}

.card-value .fa-2x {
	font-size: 2em;
}

/* Padding de columna para pantallas grandes */
@media (min-width: 992px) {
	.column-padding {
		padding-right: 50px;
	}
}

/* Opcional: un poco de margen vertical en móviles */
@media (max-width: 991px) {
	.column-padding {
		margin-bottom: 20px;
	}
}

/*============================================================================================*/
/* BLOG INDEX */
/*============================================================================================*/

/*============================================================================================*/
/* BRANDS (Logos de Marcas/Clientes) */
/*============================================================================================*/
.logo-brand {
	max-height: 250px;
	max-width: 100%;
	height: auto;
	width: auto;
	object-fit: contain;
	/* Centrar la imagen si está en un contenedor de texto */
	display: block;
	margin: 15px auto;
	opacity: 0.7;
	/* Suavizar el logo */
	transition: opacity 0.3s ease;
}

.logo-brand:hover {
	opacity: 1;
	/* Al pasar el ratón, el logo se aclara */
}

/*============================================================================================*/
/* 4. RESPONSIVE */
/*============================================================================================*/

/* MEDIA QUERIES - MEDIUM SCREEN (max-width: 1200px) */
@media (max-width: 1200px) {

	/* Ajuste de botones en listas de precios */
	.price_list a.btn_1,
	.price_list .btn_1 {
		padding: 7px 10px;
		font-size: 12px;
	}
}

/* MEDIA QUERIES - TABLET / Laptop Pequeña (max-width: 1024px) */
@media (max-width: 1024px) {

	/* Desactivar el efecto parallax en fondos para ahorrar recursos */
	.bg_content {
		background-attachment: scroll;
	}
}

/* REGLAS QUE APLICAN HASTA 991px (MÓVIL / TABLET) */
@media (max-width: 991px) {

	/* Reducir altura mínima de las tarjetas en responsive */
	.card-value {
		min-height: auto;
	}

	/* Reducir margen general */
	.margin_bottom_60 {
		margin-bottom: 30px !important;
	}

	/* Newsletter */
	input.form-control#email_newsletter_2 {
		width: 100%;
		/* Ocupar todo el ancho disponible */
		margin-right: 0;
		margin-bottom: 15px;
		/* Mover el botón a la línea siguiente */
	}

	/* Footer */
	footer .container {
		padding-bottom: 20px;
		margin-bottom: 15px;
	}

	footer h3 {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	/* Header de Página */
	#page_header h1 {
		font-size: 32px;
	}
}

/* CORRECCIÓN 1: ELIMINAR DOBLE FLECHA (CARET) EN MÓVIL */
.navbar-default .navbar-nav li.dropdown a.dropdown-toggle .caret,
.navbar-default .navbar-nav li.dropdown a.dropdown-toggle::after {
	display: none !important;
}

/* CORRECCIÓN 1: ASEGURAR ESPACIO PARA LA FLECHA DE FONDO EN MÓVIL */
.navbar-default .navbar-nav li.dropdown a.dropdown-toggle {
	background: url(../img/arrow_down_menu.svg) no-repeat center right;
	padding-right: 40px;
}

.navbar-default .navbar-nav li.dropdown.open a.dropdown-toggle {
	background: url(../img/arrow_down_menu.svg) no-repeat center right;
	padding-right: 40px;
}

#submit-analysis.button {
	margin-top: 15px;
}

/* ============================= */
/* Navbar overrides (sobre Bootstrap) */
/* ============================= */
.navbar.navbar-default .navbar-nav>li>a {
	font-family: var(--font-body) !important;
	font-size: 18px !important;
	color: #242495 !important;
}

.navbar.navbar-default .navbar-nav>li>a:hover,
.navbar.navbar-default .navbar-nav>li>a:focus,
.navbar.navbar-default .navbar-nav>.active>a,
.navbar.navbar-default .navbar-nav>.active>a:focus,
.navbar.navbar-default .navbar-nav>.active>a:hover {
	color: #000057 !important;
}

.navbar.navbar-default .dropdown-menu>li>a {
	padding: 12px 16px !important;
	font-family: var(--font-body) !important;
	font-size: 16px !important;
	line-height: 1.35 !important;
	color: #242495 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	justify-content: flex-start !important;
}

.navbar.navbar-default .dropdown-menu>li>a:hover,
.navbar.navbar-default .dropdown-menu>li>a:focus {
	color: #000057 !important;
}

.navbar.navbar-default .dropdown-menu>li>a i {
	width: 26px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

.navbar.navbar-default .dropdown-menu>.active>a,
.navbar.navbar-default .dropdown-menu>.active>a:focus,
.navbar.navbar-default .dropdown-menu>.active>a:hover {
	color: #242495 !important;
	background: transparent !important;
}

/* Botón destacado del navbar: mantener texto blanco */



/* TABLET (769px a 990px) */
@media (min-width: 769px) and (max-width: 990px) {
	.intro_title_header {
		margin-top: 0;
		text-align: center;
	}

	#form_container {
		height: auto;
	}

	#form_container .wrapper {
		padding: 110px 0 70px 0;
	}

	#form_contact {
		margin-top: 40px;
	}

	#hero_home .wrapper {
		padding-top: 150px;
		height: 450px;
	}
}

/* MEDIA QUERIES max-width 768px - TABLETS VERTICAL / MÓVILES GRANDES */
@media (max-width: 768px) {

	/* Newsletter: botón al 100% de ancho debajo del input */
	#submit-newsletter_2.button {
		width: 100%;
		margin-top: 10px;
	}

	.intro_title_header {
		margin-top: 0;
		text-align: center;
	}

	#form_contact {
		margin-top: 40px;
	}

	/* Ocultar el botón Volver al Inicio en pantallas muy pequeñas si no se desea */
	#toTop {
		width: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
	}
}

/* MEDIA QUERIES max-width 767px - MOBILE LANDSCAPE */
@media (max-width: 767px) {

	/* Ajustes específicos de secciones */
	#form_contact {
		margin-top: 20px;
	}

	#form_container {
		height: auto;
	}

	#form_container .wrapper {
		padding: 80px 0 30px 0;
	}

	#hero_home .wrapper {
		padding-top: 120px;
		height: 350px;
	}

	/* Tipografía General */
	.intro_title_header h3 {
		font-size: 36px;
	}

	.intro_title_header p {
		font-size: 16px;
	}

	h1.main_title,
	h2.main_title {
		font-size: 32px;
	}

	h1.main_title span,
	h2.main_title span {
		font-size: 18px;
	}

	h3.main_title {
		font-size: 26px;
		margin-bottom: 30px;
	}

	h3.main_title span {
		font-size: 16px;
	}


	#sub_content_in h1 {
		font-size: 32px;
	}

	#sub_content_in p {
		font-size: 18px;
	}

	p.lead.styled {
		font-size: 16px;
	}

	/* Búsqueda Overlay */
	.search-overlay-menu form {
		width: 80%;
		left: 10%;
		height: 50px;
		margin: -25px auto 0;
	}

	.search-overlay-menu input[type="search"] {
		font-size: 26px;
	}

	.search-overlay-menu form button {
		font-size: 2rem;
		top: 10px;
	}

	/* Fondo centrado */
	.bg_content .content_center {
		text-align: left;
	}

	.bg_content .content_center p {
		text-align: left;
		padding: 0;
	}

	.bg_content .content_center h3 em {
		margin: inherit;
	}

	/* Márgenes de secciones */
	.margin_60,
	.margin_120,
	.margin_120_95 {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.margin_60_35 {
		padding-top: 30px;
		padding-bottom: 5px;
	}

	.margin_60_0 {
		padding-top: 30px;
	}

	.margin_30 {
		margin-top: 15px;
		margin-bottom: 15px;
	}

	/* Newsletter */
	#newsletter_container h3 {
		font-size: 28px;
		margin: 0 0 20px 0;
	}

	/* Formulario de Análisis */
	#analysis input.form-control {
		margin-bottom: 15px;
		width: 100%;
	}

	.box_overlay {
		padding: 25px;
		text-align: center;
	}

	/* Comentarios / Opiniones */
	.pic {
		position: static;
		margin-bottom: 25px;
		width: 100%;
		display: block;
	}

	.pic h4 {
		position: static;
	}

	.pic figure {
		margin: auto;
	}

	.comment {
		border-left: none;
		padding-left: 0;
		padding-top: 30px;
	}

	/* Breadcrumbs */
	.breadcrumb {
		font-size: 12px;
	}
}

/* MEDIA QUERIES max-width 480px - MOBILE PORTRAIT */
@media (max-width: 480px) {

	/* Tipografía de slides */
	.slide_typo_2 {
		color: #fff;
		font-size: 11px !important;
		margin-top: 5px !important;
	}

	/* Botones de slides */
	.button_intro_2,
	.button_intro_2 {
		padding: 5px !important;
		font-size: 10px !important;
		margin-top: 15px !important;
	}

	.intro_title_header h3 {
		font-size: 22px;
	}

	h1.main_title,
	h2.main_title {
		font-size: 28px;
		margin-bottom: 15px;
	}

	h1.main_title span,
	h2.main_title span {
		font-size: 18px;
	}

	p.lead.styled {
		font-size: 16px;
	}

	.features-content {
		padding: 15px;
		height: auto;
	}

	#aside_panel {
		width: 100%;
	}

	.bg_content#skills {
		padding-left: 0;
		padding-right: 0;
	}

	p.lead.styled.center {
		padding: 0 15px !important;
	}

	/* Footer: Eliminar padding para aprovechar el espacio */
	footer {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* Bot?n destacado del navbar: mantener texto blanco */
.navbar.navbar-default .navbar-nav>li>a.btn-navbar,
.navbar.navbar-default .navbar-nav>li>a.btn-navbar:hover,
.navbar.navbar-default .navbar-nav>li>a.btn-navbar:focus,
.navbar.navbar-default .navbar-nav>li>a.btn-navbar:active {
        background: #242495 !important;
        color: #fff !important;
        border-radius: 30px !important;
}

.navbar.navbar-default .navbar-nav>li>a.btn-navbar:hover,
.navbar.navbar-default .navbar-nav>li>a.btn-navbar:focus,
.navbar.navbar-default .navbar-nav>li>a.btn-navbar:active {
        background: #000057 !important;
}

/* Forzar estilo de botones destacados (navbar e index) */
.navbar.navbar-default .navbar-nav>li>a.btn-navbar,
.btn-celeste,
.btn-celeste.home {
        background: #242495 !important;
        color: #fff !important;
        padding: 12px 28px !important;
        border-radius: 30px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: inline-block !important;
        border: none !important;
        line-height: 1.3 !important;
}

.btn-celeste:hover,
.btn-celeste.home:hover {
        background: #000057 !important;
        color: #ffffff !important;
}

/* Botón Enviar CV (Trabaja con Nosotros) misma línea visual */
.btn-submit {
        background: #242495 !important;
        color: #fff !important;
        padding: 12px 28px !important;
        border-radius: 30px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        box-shadow: 0 12px 24px rgba(36, 36, 149, 0.25);
        border: none !important;
}

.btn-submit:hover,
.btn-submit:focus,
.btn-submit:active {
        background: #000057 !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(0, 0, 87, 0.28);
}