/* ==========================================================================
   ESTILOS PARA ESCRITORIO - Resoluciones mayores a 480px
   ========================================================================== */

/* Ocultar elementos móviles en escritorio */
.hamburger,
.menuppal,
.mobile-title,
.mobile-user {
	display: none;
}

.nav-mobile {
	display: none;
}

/* Menú horizontal de escritorio */
nav.nav-pantalla {
	position: relative;
	background: rgb(240, 240, 240);
	font-weight: bolder;
	display: flex !important;
	justify-content: stretch !important;
	align-items: center !important;
	padding: 0;
	width: 100vw;
	max-width: 100%;
	text-align: center !important;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-bottom: 4px solid rgb(166, 210, 247);
	box-sizing: border-box;
}

nav.nav-pantalla .item {
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 1;
	cursor: pointer;
	z-index: 5;
	height: 55px;
	text-align: center;
	color: rgb(001, 086, 145);
	font-weight: bolder;
	border-right: 1px solid rgba(166, 210, 247, 0.5);
	box-sizing: border-box;
	min-width: 0;
}

nav.nav-pantalla .item:last-child {
	border-right: none;
}

/* Estilos para enlaces dentro del menú */
nav.nav-pantalla a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	color: rgb(001, 086, 145);
}

/* Efecto hover - celeste */
nav.nav-pantalla a:hover {
	background-color: rgb(166, 210, 247);
}

/* Enlaces visitados */
nav.nav-pantalla a:visited {
	text-decoration: none;
	color: rgb(001, 086, 145);
}

/* Indicador de navegación - rayita azul */
.nav-indicator {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	transition: 0.4s;
	z-index: 1;
	border-radius: 8px 8px 0 0;
	background-color: rgb(001, 086, 145);
}

/* Layout fijo para escritorio */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.container-fluid {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Header fijo en la parte superior */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: white;
	border-bottom: 1px solid #ddd;
}

/* Footer fijo en la parte inferior */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	border-top: 5px solid rgb(252, 173, 060);
	color: rgb(000, 077, 139);
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.25em;
	font-weight: bolder;
	background-color: rgb(240, 240, 240);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer .icon-whatsapp {
	color: green;
	font-weight: bolder;
}

.footer .icon-instagram,
.footer .icon-location2 {
	color: red;
	font-weight: bolder;
}

.footer .icon-facebook2 {
	color: blue;
	font-weight: bolder;
	margin-left: 10px; /* Separación del ícono de Instagram */
}

/* Contenido principal scrolleable */
.contenido {
	flex: 1;
	/* overflow-y: auto; */
	overflow-y: hidden;
	overflow-x: hidden;
	margin-top: 60px; /* Altura aproximada del header */
	/*margin-bottom: 60px;*/ /* Altura aproximada del footer */
	/* padding: 20px; */
}

/* Ocultar scrollbar pero mantener funcionalidad */
.contenido::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}

.contenido {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Estilos para diferentes resoluciones de escritorio */

/* Asegurar que elementos móviles estén ocultos en escritorio */
@media screen and (min-width: 481px) {
	.hamburger,
	.mobile-title,
	.mobile-user,
	.nav-mobile {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	.header {
		background: transparent !important;
		height: auto !important;
		padding: 0 !important;
	}
}

/* Tablet en posición vertical */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Estilos específicos para tabletas */
}

/* Tablet en posición horizontal */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	/* Estilos específicos para tabletas */
}

/* Monitores pequeños y portátiles */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	/* Estilos específicos para monitores pequeños */
}

/* Monitores medianos y grandes */
@media screen and (min-width: 1440px) {
	/* Estilos específicos para monitores medianos y grandes */
}